Customizing Select Element Styles Using CSS 

Posted on by Colvin Robert
a computer and web development icons

The HTML select element often presents challenges for consistent styling across different browsers. However, a straightforward, cross-browser compatible method exists to apply custom styles to the select element using CSS alone. 

Moving from the topic of standardizing form elements, the next article transitions into the realm of CSS customization, specifically focusing on the styling of custom scrollbars.

Challenges in Styling the Select Tag in HTML

The styling of the HTML select tag poses a common challenge due to its varied appearances across different browsers.

This discrepancy prompts developers to implement custom styles for the select tag.

Research highlights that the select tag is the foremost form control for which developers opt to create custom styles.

The primary motivations behind custom styling for the select tag include:

  • Addressing browser inconsistencies;
  • Overcoming the challenge of being unable to sufficiently alter its appearance.

Exploring these challenges and solutions provides insights into enhancing the visual consistency and user experience when working with the select tag in HTML.

Custom Styling for Select Elements with CSS

Custom styling for the select tag can be achieved using a CSS-exclusive method without the need for extra HTML markup or JavaScript. This approach maintains the element’s native functionality and accessibility while minimizing the code footprint. Now, consider the standard select tag HTML structure.

HTML:

<select>
  <option value="pen">Pen</option>
  <option value="pineapple">Pineapple</option>
  <option value="apple">Apple</option>
  <option value="pen">Pen</option>
  <option value="pen">PenPineappleApplePen</option>
</select>

Regarding the CSS, let’s begin by resetting the basic styles.

Laptop keyboard with colorful HTML code holographically emerging from the screen

CSS:

select {
  box-sizing: border-box;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;

  cursor: default;
}

While the appearance rule effectively removes the dropdown arrow, it lacks support in the Internet Explorer (IE) browser.

 If you require resetting default styling for IE, consider adding the following rule:

select::-ms-expand {
  display: none;
}

Now that we have successfully removed the default dropdown arrow, the next step involves incorporating a custom one. This can be achieved through the utilization of an encoded background SVG image. Notably, this solution is designed to maintain cross-browser compatibility. Additionally, the use of SVG offers the flexibility to make further customizations according to specific requirements.

select {
  padding: 5px 10px 5px 8px;
  border: 1px solid #999;
  border-radius: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23333' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
  color: #333;
}

Moving forward, styles for pseudo-classes :hover and :focus will be applied. In particular, for the :focus state, the box-shadow property will be introduced, and the default outline will be removed, considering the rounded corners that have been established.

select:hover {
  border-color: #777;
}

select:focus {
  border-color: #999;
  box-shadow: 0 0 1px 2px #6db4ff;
  outline: none;
}

To conclude, let’s incorporate custom styles tailored for the disabled state of the select element.

select:disabled,
select[aria-disabled=true] {
  cursor: not-allowed;
  background-color: rgba(211, 211, 211, .75);
}

select:disabled:hover,
select[aria-disabled=true]:hover {
  border-color: #999;
}

End Result

By implementing custom styles for the select tag, its appearance achieves a consistent and visually appealing look across various browsers:

Explore the complete code and see the final result on CodePen.

Future Directions for Select Tag Styling

Isometric view of developers working with a laptop and web development elements

The Open UI initiative is currently underway to create standardization for web UI components, including the select tag. Open UI’s mission is to enable web developers to seamlessly style and customize built-in web UI controls such as select dropdowns, checkboxes, radio buttons, and various input pickers. This effort aims to establish a uniform standard for styling select tags and other form components, thereby eliminating the need for makeshift solutions and reducing complexity. Stephanie Stimac discussed the prospects of standardizing select tags and what it means for HTML controls in greater depth at FrontCon 2020.

As of the publication of this article, Open UI is still in its early stages of development. The hope is that, in the not-too-distant future, web developers will be able to style all form elements with relative simplicity.

Conclusion

The select tag, despite its complexities, provides a myriad of opportunities for customization with CSS. As web design and development continue to evolve, we can anticipate simpler and more streamlined processes to style select tags and other form elements. For now, this guide provides ample knowledge to navigate the process and boost the aesthetics of your form elements.

Related Posts