How to Style Select Lists with Padding in Safari and IE Despite W3 Specification?

Styling Select Lists with Padding in Safari and IE

Despite the W3 specification not prohibiting the use of padding in select boxes, Webkit browsers such as Safari and Chrome do not support this feature. To achieve the desired effect, consider replacing the padding-left property with text-indent, ensuring to adjust the select box width accordingly.

Example:

In the following code snippet, the padding-left property is removed and replaced with text-indent:

<code class="html"><select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"></code>

By adding the same amount of text indentation as the padding would have occupied, the select box now has a left-aligned text field. This workaround effectively simulates the behavior of padding in Safari and IE, providing a consistent styling experience across different browsers.

The above is the detailed content of How to Style Select Lists with Padding in Safari and IE Despite W3 Specification?. For more information, please follow other related articles on the PHP Chinese website!