このモジュールでは、フォーム コントロールのスタイルを設定する方法と、他のサイトのスタイルに合わせる方法について学びます。
ユーザーがオプションを選択できるようサポートする
<select>
要素
<select>
要素のデフォルトのスタイルがきれいに見えず、ブラウザ間で外観に一貫性がありません。
まず、矢印を変更しましょう。
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto;
}
<select>
要素のデフォルトの矢印を削除するには、CSS の appearance
プロパティを使用します。選択した矢印を表示するには、矢印を background
として定義します。
また、<select>
要素の font-size
を 1rem
以上(ほとんどのブラウザではデフォルト値が 16 ピクセル)に変更する必要があります。無効にすると、iOS Safari でフォーム コントロールがフォーカスされたときにページのズームが行われなくなります。
もちろん、要素の色をブランドカラーに合わせて変更することもできます。
間隔、:hover
、:focus
のスタイルを追加した後、<select>
要素の外観がブラウザ間で統一されました。
これについては、2019 年の「似たようなスタイル設定」のデモをご覧ください。
<option>
要素についてはどうでしょう������<option>
要素��、いわゆる「置換された要素」であり、その表現は CSS の対象外です。現時点では、<option>
要素のスタイルを設定することはできません。
チェックボックスとラジオボタン
<input type="checkbox">
と <input type="radio">
の表示形式はブラウザによって異なります。
各種ブラウザでデモを開き、違いをご確認ください。 チェックボックスとラジオボタンをブランドと一致させ、どのブラウザでも同じように見えるようにする方法を見てみましょう。
これまでは、デベロッパーが <input type="checkbox">
コントロールと <input type="radio">
コントロールを直接スタイル設定することはできませんでした。疑似要素を使用してチェックボックスとラジオボタンのスタイルを設定できるようになりました。
または、次の置換手法を使用して、これらの要素のカスタム スタイルを作成することもできます。
まず、デフォルトのチェックボックスとラジオボタンを視覚的に非表示にします。
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
position: absolute
を display: none
や visibility: hidden
ではなく opacity: 0
と組み合わせて使用し、コントロールが視覚的にのみ非表示になるようにすることが重要です。これにより、ブラウザのユーザー補助ツリーで引き続き公開されます。視覚的に非表示のフォーム コントロールが置換要素の「上」に配置されるようにするには、さらなるスタイル設定が必要になる場合があります。これにより、スクリーン リーダーがオンのとき、またはスクリーン リーダーが有効なタッチデバイスを使用している場合に、これらの要素のいずれかにカーソルを合わせたときに、タッチガイドで視覚的に非表示のコントロールが見つけられるようになり、スクリーン リーダーのフォーカス インジケーターは通常、コントロールが画面上���レンダリングされる位置に表示されます。
カスタムのチェックボックスとラジオボタンを表示する方法はいくつかあります。
CSS 疑似要素 ::before
と CSS background
プロパティか、インライン SVG 画像を使用します。
input[type="radio"] + label::before {
content: "";
width: 1em;
height: 1em;
border: 1px solid black;
display: inline-block;
border-radius: 50%;
margin-inline-end: 0.5em;
}
input[type="radio"]:checked + label::before {
background: black;
}
CSS を使用すると、チェックボックスやラジオボタンをブランドのスタイルに合わせることができるため、さまざまなことが可能です。
詳しくは、<input type="checkbox">
と <input type="radio">
のスタイル設定とチェックボックスのカスタム スタイルをご覧ください。
フォーム コントロールにサイトの色を使用する方法
1 行のコードでサイトのスタイルをコントロールのフォームに反映させたいと思いませんか?
そのためには、CSS プロパティ accent-color
を使用します。
checkbox {
accent-color: orange;
}
理解度をチェックする
フォーム コントロールのスタイル設定に関する知識をテストする
フォーム コントロールのプラットフォーム ネイティブのスタイル設定を削除するには、どうすればよいですか?
revert: all;
を使用している。appearance: none;
を使用している。appearance: revert;
を使用している。revert: appearance;
を使用している。