Blog: Web Design
Close up of eye

Styling the Select Element Consistently in HTML

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Getting different web browsers to show the same element the same way can be tricky, especially when it comes to form inputs.

One of the most finicky HTML elements to style consistently across different browsers is the select element.

Here are some tips for styling the select element to make it look the same from browser to browser.

If you’re a front-end developer, one thing you might notice right away is the placeholder attribute doesn’t work on the select element the same way it does for other form inputs.

The select element, when it appears in a form may sometimes be called a drop-down. The select element is meant to return one (or occasionally, more than one) value when the form is submitted.

The select element is different from other types of “drop-down” menus, in that the sub-elements are option elements. The type of drop-downs that you would see on your main navigation at the top of the page would be li (list-item) elements nested in a ul (unordered list) element.

Usually there is a “placeholder” value in a select input. This is instructional, and usually isn’t a value you can choose when submitting a form. But, you may want to apply certain CSS styles to this initial value, and haven’t been able to do so. Perhaps you have found that targeting option:nth-of-type(1) doesn’t get the job done.

Perhaps you also want to make the select element look the same as all the other inputs in your form. But almost every browser renders this type of input differently from the other input elements.

Here’s how you solve these two problems.



/* Make select element behave like other inputs in your form
------------------------------------------------------------- */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  /* Use your own image for arrow */

  background: url('path/to/your/image.svg') center center no-repeat;
}

/* Setting Select placeholder to same styles as other inputs 
------------------------------------------------------------- */


select option[data-default] {
  color: #999;

  /* You can add whatever styles you want here */

}


The first CSS rule removes the default browser styles for the select element. This removes the border and default arrow that each browser adds. You can then add your own downward-facing arrow as a background-image.

The second rule targets the placeholder value for your select item. You have to target select option[data-default] to be able to style initial placeholder value.

Targeting The Placeholder Attribute in Different Browsers

You might find when trying to make cross-browser styles consistent, is some browsers give the placeholder attribute varying degrees of opacity via the default browser styles. This seems to happen on the select element or other input elements.

You can target the placeholder element on different browsers by using the pseudo-element selectors below.

Yes, you have to write each one separately. No, you can’t combine the CSS declarations into one statement the way you would with any other CSS. (I wish.) That’s just the way the browser quirks work ¯\_(ツ)_/¯. There are two declarations for Firefox, to target older and newer versions of that browser.




::-webkit-input-placeholder {
  color: #999;
  opacity: 1;
}
:-moz-placeholder { 
  color: #999;  
  opacity: 1;
}
::-moz-placeholder {  
  color: #999;  
  opacity: 1;
}
:-ms-input-placeholder {  
  color: #999;  
  opacity: 1;
}

This returns full opacity to any placeholder attributes you have on your form inputs or select elements.


Additional Resource:

Placeholder for select tag on Stack Overflow

About halfway down page you will see that the placeholder attribute is not valid on select elements.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.