Dropdown input widget Arrow Icon Customization

Hi All, How to change color for Dropdown input widget icon.
2 answers

Hello Irshath,

You can change the background image in the below class.

Keep your dropdown image in the resource folder and map the image in select.form-control class.

select.form-control {

  1. background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='8px'><polyline id='Line' fill='none' stroke='%23555555' points='0.5 0.5 6 6 11.545361 0.5'></polyline></svg>);
  2. background-repeat: no-repeat;



Hope this works for you!



Hey there, to change this follow the following steps:

  1. Inspect the element and check the HTML till you get to the icon
  2. Check the piece of css that defines the color of the icon
    1. this can be:
      1. Fill
      2. Color
      3. background-color (not likely)
  3. Once you know which piece of css to grab, create a custom class that you place on the dropdown and place the following code in your custom.scss SASS file
  4. .customdropdown{ //this is the class you use in the modeler on your drowdown widget
       .[classname used for icon]{  //place the class name that is used in the HTML for the dropdown icon
          fill: #COLOR;
          color: #COLOR;

    Hope this helps

    1. Don’t forget to accept the answer if it helps :)