Select List Padding Issues in Safari and IE: How to Resolve?

Select List Padding Issues in Safari and IE

Many developers have encountered difficulties with padding not working as expected in select lists when using browsers such as Safari and Internet Explorer. While the reason for this issue is not well-defined in the W3 specification, it is a known limitation of WebKit browsers, which power Safari and Chrome.

Solution:

Despite the lack of support for padding, you can achieve a similar effect by utilizing text indentation instead. This method involves removing any padding applied to the select box and adding an equivalent amount to its width. Additionally, set the text-indent property to the same value.

Example:

Consider the following code:

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

In this example, the original padding of 15px has been removed from the select box style. Instead, the width is increased by 15px to accommodate the text indentation, ensuring the visual effect remains consistent across different browsers.

The above is the detailed content of Select List Padding Issues in Safari and IE: How to Resolve?. For more information, please follow other related articles on the PHP Chinese website!