How to set a custom style and text for Kendo upload select files button

[n/a]

I am using angular material to style buttons in my application.   I am not clear on how to make the kendo upload button style adhere to the site defaults/or replace it with a custom button that does.

The following html. shows two buttons.  See attached image, the bottom button appears in the desired format for our like our site defaults.   Additionally, I am not clear on how to change the default text of the upload button.

<div class="filters    " (click)="activate()">
  <div class="dropdownSection">
    <kendo-upload [saveUrl]="uploadSaveUrl"
                  [removeUrl]="uploadRemoveUrl">
    </kendo-upload>
    <br />
    <button   class="btn btn-primary btn-round simple" id="btnSelectFiles">Select Files</button>
  </div>
  </div>
  <div class="clearfix"></div>

[n/a]

See attached

[n/a]

I was able to change the style by changing the encapsulation and setting the styles but I can't figure out how to set the background color on hover or active.   It switches to grey and I don't know how to prevent it.   Current scss is attached.

 

//FILTER SELECT

.dropdownSection {
  margin-right: 10px;
  color: #212121;
  padding-top: 15px;
}

.filters {
  background: #fff;
  margin: 25px 0 45px 28px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #02BFE7;
  overflow: hidden;
  -webkit-box-shadow: 0px 9px 5px -8px rgba(176,174,176,1);
  -moz-box-shadow: 0px 9px 5px -8px rgba(176,174,176,1);
  box-shadow: 0px 9px 5px -8px rgba(176,174,176,1);
  color: #212121;
}


.k-upload-button {
  width: auto;
  padding: 8px 25px;
  font-size: 14px;
  text-transform: none;
  background: #112E51;
  border-radius: 30px;
  padding: 9px 20px;
  margin: 50px 1px 15px 0px;
  font-size: 14px;
  color: #FFFFFF;
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}


.filters button {
  width: auto;
  padding: 8px 25px;
  margin: 20px 1px 25px 20px;
  font-size: 14px;
}

.filters button.btn {
  text-transform: none;
  background: #112E51;
}

.filters button:hover {
  background-color: #0D5277;
  color: #fff;
}

.filters button:active {
  background: #112E51;
}

.filters:hover, .search:hover {
  cursor: pointer;
}

.filters:active, .search:active {
  cursor: pointer;
}

//FOR JAVASCRIPT LOGIC ONLY
.filtersBorder {
  border: 1px solid #02BFE7;
}




.input-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}


.mat-form-field {
  margin: 0 15px;
}

.flex-width {
  padding: 15px;
  min-width: 800px;
  display: inline-block
}

[Dimiter Topalov]

Hi John,

You can overwrite the built-in styling associated with the hovered state of the button targeting the respective pseudo-class (:hover) in a similar fashion, e.g.:

https://stackblitz.com/edit/angular-pjjqrg?file=app/upload.component.ts

It is also worth mentioning that the custom styling can be provided at a global (not component) level so that the custom styling will be applied to the whole application without disabling the default Angular component encapsulation explicitly, e.g.:

https://stackblitz.com/edit/angular-pjjqrg-cpntcu?file=styles.css

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik