W3 仕様にもかかわらず、Safari および IE でパディングを使用して選択リストのスタイルを設定する方法は?

Safari および IE でパディングを使用して選択リストをスタイリングする

W3 仕様では選択ボックスでのパディングの使用を禁止していませんが、Webkit ブラウザーではSafari と Chrome はこの機能をサポートしていないためです。望ましい効果を実現するには、padding-left プロパティを text-indent に置き換え、それに応じて選択ボックスの幅を調整することを検討してください。

例:

以下の場合コード スニペットでは、padding-left プロパティが削除され、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>

パディングが占めるのと同じ量のテキスト インデントを追加することで、選択ボックスは左揃えになりました。テキストフィールド。この回避策は、Safari と IE でのパディングの動作を効果的にシミュレートし、さまざまなブラウザー間で一貫したスタイル エクスペリエンスを提供します。

以上がW3 仕様にもかかわらず、Safari および IE でパディングを使用して選択リストのスタイルを設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。