How to replace default pink color height lighter in dropdown

Question

Hi,How to change the drop down pink color height lighter and selected text color in drop down and in multiselect drop down

Berly Christopher · Accepted Answer

Hi Sneha,



Greetings from Syncfusion support.



We can change the focus color and selected text color in the DropDownList and MultiSelect with help of CSS styles as mentioned below.



DropDownList:



.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,

.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after {

  height: 1px;

  background: blue;

}

.e-custom .e-dropdownbase .e-list-item.e-active,

.e-custom .e-dropdownbase .e-list-item.e-active.e-hover {

  color: blue;

}

<ejs-dropdownlist

id="games"

#sample1

cssClass="e-custom"

[dataSource]="sportsData"

[fields]="localFields"

[placeholder]="localWaterMark"

[popupHeight]="height"

></ejs-dropdownlist>



Screenshot:



MultiSelect:

.e-custommultiselect

  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,

.e-custommultiselect

  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after {

  height: 1px;

  background: blue;

  bottom: -1px;

}

.e-custommultiselect .e-checkbox-wrapper .e-frame.e-check,

.e-css.e-checkbox-wrapper .e-frame.e-check {

  background-color: blue;

}

<ejs-multiselect

id="multiselect"

cssClass="e-custommultiselect"

[dataSource]="sportsData"

[fields]="localFields"

[allowFiltering]="allowFiltering"

[placeholder]="localWaterMark"

[popupHeight]="height"

mode="CheckBox"

></ejs-multiselect>

Screenshot:



Sample Link: https://stackblitz.com/edit/angular-2hvt69-kc9mnd?file=app.component.html



Else, if you want to change the UI colour of the component, we suggest you to use our Theme Studio option. By using this, you can customize the component based on the application needs and download and make use of in the application.



Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material



To know how to use theme studio, please follow the instructions provided in the below documentation.

UG Link: https://ej2.syncfusion.com/documentation/appearance/theme-studio/



Regards,

Berly B.C

Hi Berly,

Thanks for the support. I am able to customize CSS.

Regards,

Sneha

sneha · Answer

Hi Sneha,



Greetings from Syncfusion support.



We can change the focus color and selected text color in the DropDownList and MultiSelect with help of CSS styles as mentioned below.



DropDownList:



.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,

.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after {

  height: 1px;

  background: blue;

}

.e-custom .e-dropdownbase .e-list-item.e-active,

.e-custom .e-dropdownbase .e-list-item.e-active.e-hover {

  color: blue;

}

<ejs-dropdownlist

id="games"

#sample1

cssClass="e-custom"

[dataSource]="sportsData"

[fields]="localFields"

[placeholder]="localWaterMark"

[popupHeight]="height"

></ejs-dropdownlist>



Screenshot:



MultiSelect:

.e-custommultiselect

  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,

.e-custommultiselect

  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after {

  height: 1px;

  background: blue;

  bottom: -1px;

}

.e-custommultiselect .e-checkbox-wrapper .e-frame.e-check,

.e-css.e-checkbox-wrapper .e-frame.e-check {

  background-color: blue;

}

<ejs-multiselect

id="multiselect"

cssClass="e-custommultiselect"

[dataSource]="sportsData"

[fields]="localFields"

[allowFiltering]="allowFiltering"

[placeholder]="localWaterMark"

[popupHeight]="height"

mode="CheckBox"

></ejs-multiselect>

Screenshot:



Sample Link: https://stackblitz.com/edit/angular-2hvt69-kc9mnd?file=app.component.html



Else, if you want to change the UI colour of the component, we suggest you to use our Theme Studio option. By using this, you can customize the component based on the application needs and download and make use of in the application.



Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material



To know how to use theme studio, please follow the instructions provided in the below documentation.

UG Link: https://ej2.syncfusion.com/documentation/appearance/theme-studio/



Regards,

Berly B.C

Hi Berly,

Thanks for the support. I am able to customize CSS.

Regards,

Sneha

Berly Christopher · Answer

Hi Sneha, 
  
Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C

sneha · Answer

Hi Berly,How can i change the theme color pink to black for example border out line, date picker ,slider, dropdown etc . changing all sync fusion component theme color?Thanks,Sneha

Berly Christopher · Answer

Hi Sneha,

We have provided various theme support for our EJ2 Syncfusion components. So, you can use it based on the application needs.

1. Bootstrap

2. Bootstrap v4

3. Material

4. Fabric

5. High contrast

Please find the multiple themes from the below demo link and option provided in the top right corner of the page name as “Choose Theme”.

Demo: https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/default/

Please find the CDN link for the styles which is used to render the component in provided themes.

Material theme:

Bootstrap themes:

Highcontrast theme:

Fabric theme:

As we mentioned earlier, change the UI colour of the component, we suggest you to use our Theme Studio option. By using this, you can customize the component based on the application needs and download and make use of in the application.

UG Link: https://ej2.syncfusion.com/documentation/appearance/theme-studio/

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material

Regards,

Berly B.C