Dropdown input widget Arrow Icon Customization

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

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!

Thanks

answered
1

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 :)

answered