コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > 選択ボックスのテキストを中央揃えにするにはどうすればよいですか (Chrome 固有の解決策)?

選択ボックスのテキストを中央揃えにするにはどうすればよいですか (Chrome 固有の解決策)?

Patricia Arquette

リリース： 2024-12-14 17:29:15

オリジナル

222 人が閲覧しました

How Can I Center Text in a Select Box (A Chrome-Specific Solution)?

選択ボックスのテキストの配置: Chrome のみの部分的な解決策

美的理由から、選択ボックス内のテキストを中央揃えにすることもできます。またはアクセシビリティを向上させるため。ただし、CSS の select 要素に text-align 属性を手動で追加すると、期待どおりに機能しない可能性があります。

初期試行

一般的なアプローチの 1 つをフィドルで示します。提供:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="">(please select a state)</option>
<option>

ログイン後にコピー

select .lt { text-align: center ; }<br>

残念ながら、この手法は効果がありません。

Chrome 固有のソリューション

CSS のみのソリューションですが、すべてのブラウザで完全なテキストの配置が不可能な場合があるため、部分的な解決策があります。 Chrome:

select { width: 400px;テキスト整列最後:中央; }<br>

このメソッドは、選択されたオプションをドロップダウン自体の中央に配置しますが、選択されていないオプションは中央に配置しません。これは完全な調整に一歩近づきましたが、注意すべき制限でもあります。

以上が選択ボックスのテキストを中央揃えにするにはどうすればよいですか (Chrome 固有の解決策)?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：JavaScript を使用して要素のスタイル属性を動的に変更するにはどうすればよいですか? 次の記事：Vh/Vw と CSS の %: レスポンシブデザインにビューポート単位を使用する必要があるのはどのような場合ですか?

このウェブサイトの声明

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

著者別の最新記事