CSS Technique: Style Selectboxes

Last reviewed/updated: 11 Jun 2017 | Published: 29 Jul 2015 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

Selectboxes (a.k.a., dropdowns) present style conscious web developers with three primary problems. First, web browsers differ with respect to how they style selectboxes. Second, certain properties of the selectboxes and the dropdowns, themselves, cannot be styled with CSS. Third, the popular techniques/workarounds for styling checkboxes and radio buttons with CSS do not work on selectboxes. Lastly, when mouse click to select a selectbox, in IE and ED the dropdown is displayed superimposed on top of the currently selected option, and in FF and CH the dropdown is displayed below the selectbox. So, for a number of reasons, it is impossible to style selectboxes identically cross-browser. This has prompted style conscious web developers to develop a clever CSS based technique/workaround for styling selectboxes a little bit more identically cross-browser. This technique uses CSS to overflow and hide the web browser selectbox dropdown arrow and then uses CSS to prove a substitute selectbox dropdown arrow. A second technique uses style rules that are invalid per the W3C CSS Validation Service to hide the web browser selectbox dropdown arrow and then uses CSS to prove a substitute selectbox dropdown arrow. In contrast, a third technique does not hide the web browser selectbox dropdown arrow at all and simply styles the selectbox select type selector. Unfortunately, as discussed and demonstrated below, none of these techniques style selectboxes identically cross-browser.

1.1. How To Try These Examples On Your Computer

To try these examples on your computer:

  1. Download the following source files to the same drive or folder on your computer:
  2. Double click the .html files.

1.2. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Technique 1 Overflow And Hide

In short, technique 1 overflow and hide:

  1. Creates traditional selectboxes using the HTML select and option elements with or without the label element.
  2. Wraps the selectboxes in a <span></span> tags.
  3. Hides the web browser selectbox dropdown arrow. This is accomplished by using the width property to overflow the selectbox content in the selectbox wrapper, and by using the overflow: hidden style to hide the overflow content, which is the web browser selectbox dropdown arrow.
  4. Provides a substitute selectbox dropdown arrow by means of an image file that you create to look exactly as you want.

The most popular method for wrapping the selectboxes uses <div></div> tags. In this example, the selectboxes are wrapped in <span></span> tags, which; 1.) allows the selectboxes to be inline with any surrounding text (including the <label></label> tag content), and 2.) allows the use of implicit (i.e., by nesting) labels, which reduces the amount of HTML code and do not work if the selectboxes are wrapped in a div element.

Technique 1 overflow and hide appearance notes:

  • All web browsers: The currently selected option of a selectbox with focus is styled differently cross-browser. For example, in IE11 and ED14 it has a blue background that overlaps/covers your selectbox dropdown arrow until the focus is removed, in FF48 it has a 1px dotted black outline, and in CH52 it is not styled.
  • All web browsers: The selectbox dropdown is wider than the selectbox.
  • FF: For some selectboxes the selectbox dropdown right border is missing.
  • All web browsers: There is no satisfactory way to apply a focus border style to the selectboxes. First, overflowing and hiding the web browser selectbox dropdown arrow also hides the right border of the selectbox, which makes the selectboxes look odd and necessitates hiding the entire selectbox border via the select type selector border property. Second, in this example, the selectboxes are wrapped in a span element, and apparently web browsers do not support the :focus pseudo-class selector on the span element.
  • ED: If tab to select a selectbox and use arrow keys to select a selectbox option, hover works as expected. If mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is hovering the selectbox when/after the selectbox option is selected, hover works as expected in that the selectbox loses hover status/styles when the mouse cursor leaves the selectbox. However, if mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is not hovering the selectbox when/after the selectbox option is selected, hover does not work as expected in that the selectbox retains hover status/styles (including upon clicking on/selecting other web page content, including other selectboxes) until the mouse cursor hovers and leaves the selectbox. This apparent ED improperly retains selectbox hover status/styles bug applies to all selectboxes in ED.

2.1. Technique 1 Overflow And Hide Demonstration And CodePen

2.2. Technique 1 Overflow And Hide Web Browser Support

Web browser support*: IE8+, ED12+, FF3+, SF4+, CH28+, OP15+.

* Support everything except possibly the older web browsers not supporting the CSS border-radius property.

2.3. Technique 1 Overflow And Hide HTML Source Code And Notes

HTML source code: style_selectboxes_technique_1.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Style Selectboxes Technique 1 Overflow And Hide</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style_selectboxes_technique_1.css" />
 </head>
 <body>
  <h2>CSS Technique: Style Selectboxes Technique 1 Overflow And Hide</h2>
  <p>
   Selectbox without label:
   <span class="selectboxWrapper">
    <select name="unique to indicate selectbox1 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option>option three</option>
    </select>
   </span>
  </p>
  <p>
   <label>Selectbox with label:
    <span class="selectboxWrapper">
     <select name="unique to indicate selectbox2 when form submitted">
      <option>option one</option>
      <option>option two</option>
      <option>option three</option>
     </select>
    </span>
   </label>
  </p>
  <p>
   <label>Selectbox with label and option three default selected/pre-selected:
    <span class="selectboxWrapper">
     <select name="unique to indicate selectbox3 when form submitted">
      <option>option one</option>
      <option>option two</option>
      <option selected="selected">option three</option>
     </select>
    </span>
   </label>
  </p>
  <p>
   <label>
    <span class="selectboxWrapper">
     <select name="unique to indicate selectbox4 when form submitted">
      <option>option one</option>
      <option>option two</option>
      <option>option three</option>
     </select>
    </span>
   Selectbox with label.</label>
  </p>
  <p>Web browser support*: IE8+, ED12+, FF3+, SF4+, CH28+, OP15+.</p>
  <p>* Support everything except possibly the older web browsers not supporting the CSS <code>border-radius</code> property.</p>
 </body>
</html>

Technique 1 overflow and hide HTML source code notes:

  • Selectboxes use the select and option elements and the span element with the type="selectboxWrapper" attribute. The label element is a commonly used optional element. The selectbox HTML is nested in <span class="selectboxWrapper"></span> tags. If the selectbox data is to be sent when a form is submitted, use the select element with the name attribute and the option element with or without the value attribute. To default select/pre-select an option, use the option element with the selected="selected" attribute.

2.4. Technique 1 Overflow And Hide CSS Source Code And Notes

CSS source code: style_selectboxes_technique_1.css (learnwebcoding.com):

.selectboxWrapper {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  background: url("/images/style_selectboxes/dn_pnt_tri_8x4.gif") no-repeat 95%;
  border: 2px solid #999;
  border-radius: 3px;
}
.selectboxWrapper select {
  width: 125%;
  background: transparent;
  border: 0;
  padding: 4px 6px;
}
.selectboxWrapper:hover, label:hover .selectboxWrapper {
  border-color: #666;
}
.selectboxWrapper select:focus {
  outline: 0;
}

Technique 1 overflow and hide CSS source code notes:

  • Lines 1 - 8: Styles the selectbox wrapper.
  • Line 4: Hides the selectbox content that overflows the selectbox wrapper. The overflow content is the web browser selectbox dropdown arrow. In other words, hides the web browser selectbox dropdown arrow.
    To display both your selectbox dropdown arrow image and the web browser selectbox dropdown arrow, delete or comment out line 7.
  • Line 5: Provides a substitute selectbox dropdown arrow by means of an image file that you create to look exactly as you want. The background image relative horizontal offset property 95% value specifies how far from the left edge of the background image container to place the image relative to the overall width of the background image container. In other words, changing 95% to a smaller value moves the image to the left, and changing 95% to a larger value moves the image to the right. Make sure the offset is large enough to accommodate the longest string of <option></option> tag content.
  • Lines 9 - 14: Styles the selectboxes.
  • Line 10: Sets the width of selectbox to be 125% the inherited width, which is the width of the selectbox wrapper. This causes the selectbox content to overflow the selectbox wrapper.
    • Depending upon the length of the longest string of <option></option> tag content, you may need to increase the width value, or you may be able to decrease the width value.
    • Instead of setting the width of the selectbox to be a percentage relative to the width of the selectbox wrapper, the selectbox and selectbox wrapper can be assigned fixed widths. Assigning the selectbox a width 30px greater than the selectbox wrapper width should be enough to overflow/hide the web browser selectbox dropdown arrow.
  • Line 11: Allows your selectbox dropdown arrow to be displayed/show through. The selectbox overlays the selectbox wrapper. Therefore, in order for your selectbox dropdown arrow to be displayed, the selectbox must allow it to show through. This is accomplished by setting the selectbox background property to background: transparent. The selectbox background must be/remain transparent. Therefore, apply any desired background styles to the selectbox wrapper, not the selectbox.
  • Line 12: Hides the selectbox border. Overflowing and hiding the web browser selectbox dropdown arrow also hides the right border of the selectbox, which makes the selectboxes look odd and necessitates hiding the entire selectbox border via the select type selector border property.
  • Lines 15 - 17: Optional. Styles the selectboxes without labels (.selectboxWrapper:hover) and with labels (label:hover .selectboxWrapper) with a hover style.
  • Lines 18 - 20: Removes the blue outline that recent versions of CH applies to a selectbox with focus.

3. Technique 2 Invalid Style Rules

In short, technique 2 invalid style rules:

  1. Creates traditional selectboxes using the HTML select and option elements with or without the label element.
  2. Hides the web browser selectbox dropdown arrow using styles that are invalid per the W3C CSS Validation Service.
  3. Provides a substitute selectbox dropdown arrow by means of an image file that you create to look exactly as you want.

Technique 2 invalid style rules appearance notes:

  • All web browsers: The currently selected option of a selectbox with focus is styled differently cross-browser. For example, in IE11 it has a blue background that, contrary to technique 1, does not overlap/cover your selectbox dropdown arrow, in FF48 it has a 1px dotted black outline, and in ED14, contrary to technique 1, and CH52 it is not styled.
  • All web browsers: Contrary to technique 1, the selectbox dropdown is the same width as the selectbox.
  • FF: Contrary to technique 1, for all selectboxes the selectbox dropdown right border is present.
  • All web browsers: Contrary to technique 1, there is a satisfactory way to apply a focus border style to the selectboxes.
  • ED: If tab to select a selectbox and use arrow keys to select a selectbox option, hover works as expected. If mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is hovering the selectbox when/after the selectbox option is selected, hover works as expected in that the selectbox loses hover status/styles when the mouse cursor leaves the selectbox. However, if mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is not hovering the selectbox when/after the selectbox option is selected, hover does not work as expected in that the selectbox retains hover status/styles (including upon clicking on/selecting other web page content, including other selectboxes) until the mouse cursor hovers and leaves the selectbox. This apparent ED improperly retains selectbox hover status/styles bug applies to all selectboxes in ED.

3.1. Technique 2 Invalid Style Rules Demonstration And CodePen

3.2. Technique 2 Invalid Style Rules Web Browser Support

Web browser support*: IE10+, ED12+, FF35+, SF3.1+, CH2+, OP15+.

* Support everything except possibly the older web browsers not supporting the CSS border-radius property.

3.3. Technique 2 Invalid Style Rules HTML Source Code And Notes

HTML source code: style_selectboxes_technique_2.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Style Selectboxes Technique 2 Invalid Style Rules</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style_selectboxes_technique_2.css" />
 </head>
 <body>
  <h2>CSS Technique: Style Selectboxes Technique 2 Invalid Style Rules</h2>
  <p>
   Selectbox without label:
   <select name="unique to indicate selectbox1 when form submitted">
    <option>option one</option>
    <option>option two</option>
    <option>option three</option>
   </select>
  </p>
  <p>
   <label>Selectbox with label:
    <select name="unique to indicate selectbox2 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option>option three</option>
    </select>
   </label>
  </p>
  <p>
   <label>Selectbox with label and option three default selected/pre-selected:
    <select name="unique to indicate selectbox3 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option selected="selected">option three</option>
    </select>
   </label>
  </p>
  <p>
   <label>
    <select name="unique to indicate selectbox4 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option>option three</option>
    </select>
   Selectbox with label.</label>
  </p>
  <p>Web browser support*: IE10+, ED12+, FF35+, SF3.1+, CH2+, OP15+.</p>
  <p>* Support everything except possibly the older web browsers not supporting the CSS <code>border-radius</code> property.</p>
 </body>
</html>

Technique 2 invalid style rules HTML source code notes:

  • Selectboxes use the select and option elements. The label element is a commonly used optional element. If the selectbox data is to be sent when a form is submitted, use the select element with the name attribute and the option element with or without the value attribute. To default select/pre-select an option, use the option element with the selected="selected" attribute.

3.4. Technique 2 Invalid Style Rules CSS Source Code And Notes

CSS source code: style_selectboxes_technique_2.css (learnwebcoding.com):

select::-ms-expand {
  display: none;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("/images/style_selectboxes/dn_pnt_tri_8x4.gif") no-repeat 95%;
  border: 2px solid #999;
  border-radius: 3px;
  padding: 4px 25px 4px 6px;
}
select:hover {
  border-color: #666;
}
select:focus {
  border-color: #666;
  outline: 0;
}

Technique 2 invalid style rules CSS source code notes:

  • Lines 1 - 3: In IE10+, hides the web browser selectbox dropdown arrow.
    To display both your dropdown arrow and the web browser selectbox dropdown arrow in IE10+, delete or comment out line 2. If your dropdown arrow is not visible, change its position.
  • Line 1: The W3C CSS Validation Service throws a warning: ::-ms-expand is an unknown vendor extended pseudo-element.
  • Lines 4 - 12: Styles the selectboxes.
  • Line 5: In FF35+, hides the web browser selectbox dropdown arrow. The W3C CSS Validation Service throws a warning: Property -moz-appearance is an unknown vendor extension.
    To display both your dropdown arrow and the web browser selectbox dropdown arrow in FF35+, delete or comment out line 5. If your dropdown arrow is not visible, change its position.
  • Line 6: In SF3.1+ and CH2+, hides the web browser selectbox dropdown arrow. The W3C CSS Validation Service throws a warning: Property -webkit-appearance is an unknown vendor extension.
    To display both your dropdown arrow and the web browser selectbox dropdown arrow in SF3.1+ and CH2+, delete or comment out line 6. If your dropdown arrow is not visible, change its position.
  • Lines 1 - 3 and 6: In ED12+, hides the web browser selectbox dropdown arrow.
    • Yes, it seems odd that apparently both lines 1 - 3 and line 6 are required to hide the web browser selectbox dropdown arrow in ED12+.
    • To display both your dropdown arrow and the web browser selectbox dropdown arrow in ED12+, delete or comment out lines 2 and 6. If your dropdown arrow is not visible, change its position.
  • Line 7: Proposed vendor independent property/style not incorporated into a W3C CSS Recommendation. Apparently ignored by all web browsers but provided as a fallback just in case. The W3C CSS Validation Service throws an error: Property appearance doesn't exist.
  • Line 8: Provides a substitute dropdown arrow by means of an image file that you create to look exactly as you want. The background image relative horizontal offset property 95% value specifies how far from the left edge of the background image container to place the image relative to the overall width of the background image container. In other words, changing 95% to a smaller value moves the image to the left, and changing 95% to a larger value moves the image to the right. Make sure the offset is large enough to accommodate the longest string of <option></option> tag content.
  • Line 11: Creates a pseudo-container for your dropdown arrow. In other words, as long as the background image relative horizontal offset property value in line 8 and the padding right property value in line 11 are such that your dropdown arrow is located in the padding right, then your dropdown arrow is guaranteed not to overlap the longest string of <option></option> tag content.
    Instead of using the padding property to create a pseudo-container for your dropdown arrow and allowing the width of the selectbox to otherwise dynamically adjust to the length of the longest string of <option></option> tag content. The selectbox can be assigned a fixed width. Just make sure the width is large enough to accommodate the longest string of <option></option> tag content and your dropdown arrow.
  • Lines 13 - 15: Optional. Styles the selectboxes with a hover style.
  • Lines 16 - 19: Optional. Styles the selectboxes with a focus style and removes the blue outline that recent versions of CH applies to a selectbox with focus.

4. Technique 3 Style The select Type Selector

In short, technique 3 style the select type selector:

  1. Creates traditional selectboxes using the HTML select and option elements with or without the label element.
  2. Styles the selectbox select type selector.

Technique 3 style the select type selector appearance notes:

  • All web browsers: Uses the web browser selectbox dropdown arrow, which is styled differently cross-browser.
    Apparently Bootstrap selects (getbootstrap.com) use the web browser selectbox dropdown arrow for ED, FF, and CH, not IE.
  • IE and ED: There is only a couple of pixels separating the longest string of <option></option> tag content from the left edge of the web browser selectbox dropdown arrow. If this looks unsatisfactory, you might try some technique (e.g., adding &nbsp; characters) to increase the separation.
  • All web browsers: The currently selected option of a selectbox with focus is styled differently cross-browser. For example, in IE11 and ED14 it has a blue background that does not overlap/cover the web browser selectbox dropdown arrow, in FF48 it has a 1px dotted black outline, and in CH52 it is not styled.
  • All web browsers: Contrary to technique 1, the selectbox dropdown is the same width as the selectbox.
  • FF: Contrary to technique 1, for all selectboxes the selectbox dropdown border right is present.
  • All web browsers: Contrary to technique 1, there is a satisfactory way to apply a focus border style to the selectboxes.
  • ED: If tab to select a selectbox and use arrow keys to select a selectbox option, hover works as expected. If mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is hovering the selectbox when/after the selectbox option is selected, hover works as expected in that the selectbox loses hover status/styles when the mouse cursor leaves the selectbox. However, if mouse click to select a selectbox and/or mouse click to select a selectbox option, and the mouse cursor is not hovering the selectbox when/after the selectbox option is selected, hover does not work as expected in that the selectbox retains hover status/styles (including upon clicking on/selecting other web page content, including other selectboxes) until the mouse cursor hovers and leaves the selectbox. This apparent ED improperly retains selectbox hover status/styles bug applies to all selectboxes in ED.

4.1. Technique 3 Style The select Type Selector Demonstration And CodePen

4.2. Technique 3 Style The select Type Selector Web Browser Support

Web browser support*: IE8+, ED12+, FF1.5+, SF4+, CH2+, OP10+.

* Support everything except possibly the older web browsers not supporting the CSS border-radius property.

4.3. Technique 3 Style The select Type Selector HTML Source Code And Notes

HTML source code: style_selectboxes_technique_3.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Style Selectboxes Technique 3 Style The select Type Selector</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style_selectboxes_technique_3.css" />
 </head>
 <body>
  <h2>CSS Technique: Style Selectboxes Technique 3 Style The <code>select</code> Type Selector</h2>
  <p>
   Selectbox without label:
   <select name="unique to indicate selectbox1 when form submitted">
    <option>option one</option>
    <option>option two</option>
    <option>option three</option>
   </select>
  </p>
  <p>
   <label>Selectbox with label:
    <select name="unique to indicate selectbox2 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option>option three</option>
    </select>
   </label>
  </p>
  <p>
   <label>Selectbox with label and option three default selected/pre-selected:
    <select name="unique to indicate selectbox3 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option selected="selected">option three</option>
    </select>
   </label>
  </p>
  <p>
   <label>
    <select name="unique to indicate selectbox4 when form submitted">
     <option>option one</option>
     <option>option two</option>
     <option>option three</option>
    </select>
   Selectbox with label.</label>
  </p>
  <p>Web browser support*: IE8+, ED12+, FF1.5+, SF4+, CH2+, OP10+.</p>
  <p>* Support everything except possibly the older web browsers not supporting the CSS <code>border-radius</code> property.</p>
 </body>
</html>

Technique 3 style the select type selector HTML source code notes:

  • Selectboxes use the select and option elements. The label element is a commonly used optional element. If the selectbox data is to be sent when a form is submitted, use the select element with the name attribute and the option element with or without the value attribute. To default select/pre-select an option, use the option element with the selected="selected" attribute.

4.4. Technique 3 Style The select Type Selector CSS Source Code And Notes

CSS source code: style_selectboxes_technique_3.css (learnwebcoding.com):

select {
  border: 2px solid #999;
  border-radius: 3px;
  padding: 4px 6px;
}
select:hover {
  border-color: #666;
}
select:focus {
  border-color: #666;
  outline: 0;
}

Technique 3 style the select type selector CSS source code notes:

  • Lines 1 - 5: Styles the selectboxes.
  • Lines 6 - 8: Optional. Styles the selectboxes with a hover style.
  • Lines 9 - 12: Optional. Styles the selectboxes with a focus style and removes the blue outline that recent versions of CH applies to a selectbox with focus.

5. Resources And Additional Information