How to Apply Padding to Select Lists in Safari and Internet Explorer?

Padding Not Applied to Safari and IE Select Lists

Enhancing the styling of select lists in Safari and Internet Explorer can be challenging due to a lack of support for padding. While the World Wide Web Consortium (W3C) specification allows for padding in select boxes, webkit browsers like Safari and Chrome disregard this feature.

To overcome this issue, an alternative approach is to utilize text-indent in place of padding-left. By adding the same amount to the width of the select box, you can effectively achieve the desired spacing.

Consider the following code:

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

This example demonstrates how to achieve the desired 15px padding by applying text-indent: 15px and increasing the width of the select box accordingly.

The above is the detailed content of How to Apply Padding to Select Lists in Safari and Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!