Research on <select> Element and :after Pseudo-element Compatibility Issues in WebKit

Problem Background and Phenomenon Analysis

In web development practice, developers frequently encounter the need for deep customization of <select> elements. However, when attempting to use CSS's :after pseudo-element to add additional decorations to dropdown select boxes, the expected results often cannot be achieved in WebKit-based browsers. The fundamental reason for this phenomenon lies in the special rendering mechanism of <select> elements.

In-depth Technical Principle Analysis

According to W3C specifications and browser implementation differences, <select> elements belong to the "replaced element" category. In most operating systems, such elements are directly rendered by native OS controls rather than being drawn autonomously by the browser. This means the browser's ability to control the styling of such elements is severely limited. When developers set -webkit-appearance: none, although the default appearance is removed, pseudo-elements still cannot display normally because the OS-level rendering pipeline does not support adding pseudo-content to such controls.

Comparative Study of Solutions

Wrapper Element Method

The most reliable solution is to use a wrapper element. By creating an outer container and applying the pseudo-element to the wrapper rather than the <select> element itself:

<div class="select-wrapper">
  <select name="">
    <option value="">Test</option>
  </select>
</div>

Corresponding CSS implementation:

.select-wrapper {
    position: relative;
    display: inline-block;
}

.select-wrapper:before {
    content: "\25BC";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
    z-index: 1;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 8px 30px 8px 10px;
    width: 100%;
}

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

Background Image Method

Another effective approach is to use SVG background images instead of pseudo-elements:

select.custom-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #000000 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 12px 12px;
    color: #ffffff;
    border: none;
    padding: 8px 30px 8px 10px;
    border-radius: 0;
}

Cross-browser Compatibility Considerations

Special attention must be paid to compatibility issues across different browsers during implementation. For Internet Explorer, the ::-ms-expand pseudo-element must be used to hide the default arrow. Simultaneously, it's recommended to provide complete property definitions for all browser prefix variants to ensure styling consistency.

Best Practice Recommendations

Based on practical project experience, the wrapper element method is recommended as the preferred solution. This approach offers better browser compatibility and maintainability while allowing the use of font icons or custom graphics as dropdown indicators. When implementing, attention should be paid to setting pointer-events: none to ensure pseudo-elements do not interfere with user interaction with the <select> element.

Future Outlook

As web standards continue to evolve and browser technology advances, more direct solutions may emerge in the future. However, at this stage, understanding and properly applying existing workarounds is an effective approach to solving such compatibility issues. Developers should continuously monitor updates to relevant standards and implementation progress by browser vendors.