Why Isn\'t Padding Working in Safari and IE Select Lists?

Padding Not Displaying in Select Lists in Safari and IE

Despite the lack of restrictions in the W3 specification, padding in select boxes is not supported by WebKit browsers, including Safari and Chrome. As a result, padding is not applied in these browsers.

To address this issue, consider using text-indent instead of padding-left. Maintain the same indentation amount by incrementing the width of your select box accordingly.

For example, in your code:

<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 text-indent:15px and increasing the width to 258px, the select box will now display the same indent as if it had 15px of left padding, while still functioning correctly in WebKit browsers.

The above is the detailed content of Why Isn\'t Padding Working in Safari and IE Select Lists?. For more information, please follow other related articles on the PHP Chinese website!