Dropdownlist icon not changing even after applying the css

[Aravind Rajagopal]

Hi,

I was trying to change the color of the default drop down icon using the css given in the documentation.

However its not working at all. Any help on this would be great

[Mohanraj Mathaiyan]

Hi Aravind Rajagopal,

we created the sample based on UG code sample, that’s working fine our end. the color changed in our sample to the drop down icon, issues not replicated. Please refer the attached sample and documentation for your reference.

Documentation: https://ej2.syncfusion.com/react/documentation/drop-down-list/style/#customizing-the-dropdown-icons-color

Sample: https://stackblitz.com/edit/react-5pjppg-17ht9v?file=index.css,index.js

.e-ddl.e-input-group .e-input-group-icon,.e-ddl.e-input-group.e-control-wrapper .e-input-group-icon:hover {

    color: #bb233d;

    font-size: 13px;

}

 

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Mohanraj M

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Aravind Rajagopal]

I tried this, but this is not working.

I have my dropdownlist component within a treegrid.

Here is the full set of code.

Attachment: test_2fdd69a4.zip

[Mohanraj Mathaiyan]

Hi Aravind Rajagopal,

We suggest adding a custom class name into the dropdown list component using the cssClass property instead of the className property. It is used to set the class name for the dropdown list container. Please find the below code and sample for your reference.

Index.js

<DropDownListComponent

              cssClass="activity-state-selector"

              id="country"

            />

Index.css

.activity-state-selector.e-ddl.e-input-group .e-input-group-icon,

.activity-state-selector.e-ddl.e-input-group.e-control-wrapper

  .e-input-group-icon:hover {

  color: #bb233d;

  font-size: 13px;

}

Sample : https://stackblitz.com/edit/react-5pjppg-k12weu?file=index.css,index.html

Regards,

Mohanraj M

[Aravind Rajagopal]

Thank you.

This is working.

[Buvana Sathasivam]

Hi Aravind,

Most welcome. Please let us know if you need any further assistance.

Regards,

Buvana S