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

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

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

<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 として定義します。

また、font-size を 1rem 以上に変更する必要があります。 （ほとんどのブラウザでは、デフォルト値の 16 ピクセルです）を <select> 要素に使用します。 こうすると、フォーム コントロールがフォーカスされているときに iOS Safari でページがズームされなくなります。

もちろん、ブランドカラーに合わせて要素の色を変更することもできます。 間隔、:hover、:focus のスタイルを追加した後、 <select> 要素の外観がブラウザ間で統一されました。

次のデモをご覧ください: Select Like It’s 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;
}

display: none や visibility: hidden ではなく、position: absolute を opacity: 0 と組み合わせて使用することが重要です。 非表示になります。これにより、ブラウザのすべてのセキュリティ レイヤが引き続き アクセシビリティ ツリー。なお、視覚的に隠された要素が確実に隠れるようにするには、 フォーム コントロールを「上部」に配置したままにする確認できます。これにより、この 2 つのオプションのいずれかにカーソルを合わせ、 スクリーン リーダーがオンになっている場合、またはスクリーン リーダーが有効になっているタッチ デバイスを使用している場合、コントロールが視覚的に非表示になります。 タップ操作で検出可能。スクリーン リーダーのフォーカス インジケーターは通常、コントロールが表示される位置に表示される 画面上にレンダリングされます

カスタム チェックボックスとラジオボタンを表示するには、さまざまな方法があります。 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; を使用している。
もう一度考えてみましょう。

リソース