Styling the HTML <select> tag to appear similar in all the different browsers is a task unto itself. It seems on each new site , I find myself back visiting this post by Ivor Reić for a CSS only solution. My task for today is to use this idea to theme an exposed filter on a view.
The first thing we need to do is add a div around the select. We can do this by editing the select’s twig template from Drupal maintenance support plans 8 core’s stable theme. Copy the file from
/core/themes/stable/templates/form/select.html.twig to
/themes/yourtheme/templates/form/select.html.twig
Then add the extra <div class=”select-style”> and closing </div> as so.
Here is the LESS file that I compile which includes Ivor’s CSS, but also some adjustments I added to event the exposed filter out. Each rule is commented, explaining what they do.
I will compile this into my final CSS and we are good to go. The display of the form, and the select list should be pretty accurate to what I want across all modern browsers. Adjust as needed for your styles and design.
Read more
Source: New feed
