Safari と Internet Explorer で選択リストにパディングを適用する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Safari と Internet Explorer で選択リストにパディングを適用する方法

Oct 24, 2024 am 08:44 AM

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

Safari および IE の選択リストにパディングが適用されない

Safari および Internet Explorer の選択リストのスタイルを強化することは、次の理由により困難になる場合があります。パディングのサポートが不足している。 World Wide Web Consortium (W3C) 仕様では選択ボックスのパディングが許可されていますが、Safari や Chrome などの Webkit ブラウザではこの機能が無視されます。

この問題を克服するための別のアプローチは、代わりに text-indent を利用することです。パディング左。選択ボックスの幅に同じ量を追加することで、目的の間隔を効果的に実現できます。

次のコードを検討してください:

&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;

ログイン後にコピー

この例では、目的の 15 ピクセルを実現する方法を示します。 text-indent: 15px を適用し、それに応じて選択ボックスの幅を増やすことでパディングします。

以上がSafari と Internet Explorer で選択リストにパディングを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。