Why Doesn\'t CSS `::after` Style My `` Element in WebKit?

Styling with CSS :after Pseudo-Element in WebKit

In an attempt to enhance the aesthetics of a

element without resorting to images, the following HTML and CSS were implemented:

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

However, the expected result of a split using the ::after pseudo-element failed to materialize. While the CSS specs provide no insight into this specific scenario, further investigation suggests that the behavior observed may be inherent to the way elements are handled by the operating system, overriding the styling applied through CSS.

The above is the detailed content of Why Doesn\'t CSS `::after` Style My `` Element in WebKit?. For more information, please follow other related articles on the PHP Chinese website!