HTML ラジオ ボタンは Web フォームの定番ですが、デフォルトの外観にはまだ改善の余地がたくさんあります。このブログ投稿では、CSS を使用してラジオ ボタンの外観をカスタマイズし、よりユーザー フレンドリーで視覚的に魅力的なエクスペリエンスを作成する、私のお気に入りの方法の 1 つを説明します。   https://youtu.be/PlldXyuTnUw?embedable=true まずはラジオボタンを非表示にしてみましょう! まず、ラジオ ボタンのクロスブラウザー スタイルの制限を認識する必要があります。直接スタイルを設定できないのはもどかしいですが、回避策を使用できます。この例では、最初のステップは実際のラジオ ボタン入力を非表示にすることです。奇妙に聞こえるかもしれませんが、スタイルを設定できないことはわかっているので、方程式から除外するだけで済みます。 ただし、これはアクセス可能な方法で実行し、すべてのユーザーにとって機能し続けるようにする必要があります。これは、使いやすさを維持しながらコンテンツを視覚的に非表示にする次のスタイルのセットを使用することで実現できます。   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; } カスタムラジオボタンの作成 ラジオ ボタンのカスタム外観を作成するには、ラベルの 擬似要素といくつかの単純な CSS を利用して、探している外観を作成します。 ::before この例の 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 ラジオ ボタンの外観を変更できることを覚えておいてください。   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

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

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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