The HTML <select> element is one of the most stubborn elements to style consistently across browsers. When it shows up as an exposed filter on a Drupal Views page, you often need it to match the rest of your design system — but the browser defaults fight you.
Here’s a CSS-only approach that works across modern browsers without relying on JavaScript to replace the native element.
The wrapping technique
The trick is to wrap the <select> in a container you control, then use the container for all your visual styling while letting the native select handle the actual interaction:
.views-exposed-form .form-item-field-category-target-id {
position: relative;
display: inline-block;
}
.views-exposed-form select {
/* Reset native appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Visual styling */
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
border: 1px solid var(--line);
border-radius: 4px;
background-color: var(--paper);
color: var(--text);
font-family: var(--font-body);
font-size: 0.9rem;
/* Make it fill its container */
width: 100%;
cursor: pointer;
}
/* Custom dropdown arrow via a pseudo-element on the wrapper */
.views-exposed-form .form-item-field-category-target-id::after {
content: "";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--muted);
pointer-events: none;
}
Drupal-specific notes
The Drupal 8 Views form output wraps each filter in a form-item div with a predictable class based on the filter’s machine name. Target those classes specifically rather than styling all selects globally — you don’t want to accidentally affect admin UI selects.
Add the wrapper div in a Views form template (views-exposed-form.html.twig) or use a hook_form_alter to add the wrapper class via PHP:
function mytheme_form_views_exposed_form_alter(&$form, $form_state, $form_id) {
if (isset($form['field_category_target_id'])) {
$form['field_category_target_id']['#attributes']['class'][] = 'styled-select';
}
}
The cross-browser gotcha
Firefox respects appearance: none but requires the explicit -moz-appearance: none prefix. IE11 ignores appearance entirely — if IE11 support matters, hide the custom arrow for IE using a conditional class on <html>.