Why Doesn\'t My CSS Pseudo-Element Styling Work on Select Boxes?

Styling Select Elements with CSS: Quirks in Select Boxes with Pseudo-Elements

When attempting to style select boxes using pseudo-elements in WebKit browsers, such as Safari and Chrome, unexpected behavior can arise. You may be wondering why the following code does not yield the desired effect:

<select name="selector">
  <option value="">Test</option>
</select>

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select::after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

The issue stems from the OS's involvement in rendering select elements. Despite being HTML elements, select boxes are typically rendered by the operating system, which can impede custom styling efforts. This limitation affects both WebKit-based browsers as well as other OS-dependent rendering engines.

As a result, styling select elements using pseudo-elements, such as the :after selector in the example above, may not have the intended effects or may behave inconsistently across different systems.

The above is the detailed content of Why Doesn\'t My CSS Pseudo-Element Styling Work on Select Boxes?. For more information, please follow other related articles on the PHP Chinese website!