フォーム コントロールのスタイルを設定する

このモジュールでは、フォーム コントロールのスタイルを設定する方法と、他のサイトのスタイルに合わせる方法について学びます。

ユーザーがオプションを選択できるようサポートする

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

理解度をチェックする

フォーム コントロールのスタイル設定に関する知識をテストする

リソース

• アクセント カラー
• <select> 要素のスタイル設定
• スタイル付きフォーム コントロールのユーザー補助機能
• UI を開く