Why Doesn\'t My CSS `::after` Pseudo-element Render on a WebKit Select Box?

CSS :after Not Rendering with WebKit Select Box

Problem:

Manipulating select box appearances with the CSS ::after pseudo-element to create a customized dropdown without images is proving unsuccessful. Despite applying appropriate CSS rules, the :after element remains invisible.

HTML:

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

CSS:

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;
}

Observation:

The :after element fails to appear despite the applied styling.

Solution:

Unfortunately, it appears that this customization is not currently feasible due to certain technical limitations in WebKit browsers. Select box rendering is often handled by the operating system rather than the browser itself, restricting the ability to fully control their appearance through CSS.

The above is the detailed content of Why Doesn't My CSS `::after` Pseudo-element Render on a WebKit Select Box?. For more information, please follow other related articles on the PHP Chinese website!