Styling Views Exposed Filters Selects in Drupal 8

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 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.