CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでカスタムチェックボックス＆ラジオボタンを作る方法をわかりやすく解説

CSSを使えば、ブラウザ標準のチェックボックスの見た目を自由にカスタマイズできます。基本の考え方は、元の input 要素を非表示にした上で、span 要素で作成した独自のボックスを代わりに表示するというものです。この手法はラジオボタンにもそのまま応用でき、border-radius を組み合わせれば丸型のラジオボタンも簡単に作れます。

カスタムチェックボックスの作成手順

  1. label要素を基準にする： position: relative; を指定し、padding-left でチェックボックス分の余白を確保します。
  2. input要素を隠す： opacity: 0; と width: 0; height: 0; を指定して見た目上消します。クリック操作自体は有効なままです。
  3. 独自のボックスを描画： span 要素を position: absolute; で左上に配置し、サイズと背景色を設定します。
  4. 状態に応じて色を変える： :hover 疑似クラスでホバー時の色を、input:checked ~ .checkboxMarked セレクタで選択時の背景色を変更します。
  5. チェックマークを描く： ::after 疑似要素に白い border を設定し、transform: rotate(45deg); で回転させることでチェックマークを作ります。

コード例

<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkboxMarked {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
    background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
    background-color: rgb(5, 170, 32);
}
.checkboxMarked:after {
    content: "";
    position: absolute;
    display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked:after {
    display: block;
}
.checkboxContainer .checkboxMarked:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
    <input type="checkbox" checked="checked">
    <span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
    <input type="checkbox">
    <span class="checkboxMarked"></span>
</label>
</body>
</html>

出力結果

このコードを実行すると、以下のような画面が表示されます。「Rice」にはあらかじめチェックが入っているため、濃い緑色のチェックマークが表示されています。マウスカーソルを乗せるとボックスが薄い緑色に変化し、クリックしてチェックを入れると緑色のチェックマークが現れます。

CSSでカスタムチェックボックス＆ラジオボタンを作る方法をわかりやすく解説

  1. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル

  2. CSS appearanceプロパティで作るカスタムラジオボタンの実装方法

    CSSのappearanceプロパティを使用すると、ユーザーのOS（オペレーティングシステム）が標準で備えるプラットフォームネイティブなスタイルに基づいて要素をスタイリングできます。このプロパティを「none」に設定すれば、ブラウザ既定の外観を無効化でき、ラジオボタンやチェックボックスなど、通常はスタイル変更が難しいフォーム部品も自由にデザインできるようになります。 appearanceプロパティの構文 CSSのappearanceプロパティの基本構文は以下のとおりです。 Selector { appearance: /*値*/; -webkit-appearance: /*値