HTML ラジオ ボタンのスタイルを設定する方法: ステップバイステップ ガイド

HTML ラジオ ボタンは Web フォームの定番ですが、デフォルトの外観にはまだ改善の余地がたくさんあります。このブログ投稿では、CSS を使用してラジオ ボタンの外観をカスタマイズし、よりユーザー フレンドリーで視覚的に魅力的なエクスペリエンスを作成する、私のお気に入りの方法の 1 つを説明します。

まずはラジオボタンを非表示にしてみましょう!

まず、ラジオ ボタンのクロスブラウザー スタイルの制限を認識する必要があります。直接スタイルを設定できないのはもどかしいですが、回避策を使用できます。この例では、最初のステップは実際のラジオ ボタン入力を非表示にすることです。奇妙に聞こえるかもしれませんが、スタイルを設定できないことはわかっているので、方程式から除外するだけで済みます。

ただし、これはアクセス可能な方法で実行し、すべてのユーザーにとって機能し続けるようにする必要があります。これは、使いやすさを維持しながらコンテンツを視覚的に非表示にする次のスタイルのセットを使用することで実現できます。

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

カスタムラジオボタンの作成

ラジオ ボタンのカスタム外観を作成するには、ラベルの::before擬似要素といくつかの単純な CSS を利用して、探している外観を作成します。

この例の HTML は次のようになります。

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

まず、次のスタイルをラベル要素に追加します。

 label { display: inline-flex; align-items: center; }

これにより、ラジオ ボタン スタイルを追加すると、ラベル テキストと垂直方向に正しく配置されるようになります。

ここで、 ::before疑似要素を使用してモック ラジオ ボタンを追加します。

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

この時点で、ラジオ ボタン リストに似たものができ始めていますが、ラジオをクリックしても何も起こっていないことがわかります。疑似要素は視覚的にはラジオ ボタンに似ていますが、チェックされた状態をまだ処理していないため、対話性が欠けています。

インタラクションと状態の処理

: :checked疑似クラスとラベル上の隣接する兄弟セレクターを使用して、チェックされた状態を処理できます。

 input[type="radio"]:checked + label { color: black; }

内側のドットについては、疑似要素の放射状グラデーションを利用できます。

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

これらをクリックすると、ネイティブのラジオ ボタンと同じように機能します。また、いくつかのトランジション効果を追加することで、インタラクションを強化できます。

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

集中力を忘れないようにしましょう

アクセシビリティを向上させるには、模擬ラジオ ボタンのフォーカス状態にも対処する必要があります。今回は:focus疑似クラスと、ラベルが付いた隣接する兄弟セレクターを利用する必要があります。

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

結論

この方法に従うことで、ユーザー エクスペリエンスを大幅に向上させる、スタイリッシュでアクセスしやすいカスタム ラジオ ボタンを作成できます。これらのカスタマイズされたラジオ ボタンは、標準のものよりも見栄えが良いだけでなく、適切に実装すると、より優れたフィードバックとインタラクションを提供できます。

これは非常に単純な例で、ネイティブ ブラウザ スタイルとあまり変わらないように見えるかもしれませんが、重要なのは、この設定を使用すると、ほぼ何でもできるということです。したがって、自由にスタイルを試して、プロジェクトのデザインに合わせて調整してください。

実際の動作を見てみたいですか?

以下のコード ペンの例で、デモ コードとこの手法の例を確認してください。ご質問やご意見がございましたら、お気軽にコメントを残してください。

少しの創造力と CSS を使えば、アクセシビリティと使いやすさを維持しながら、デザインに合わせて HTML ラジオ ボタンの外観を変更できることを覚えておいてください。