こんにちは、ハマです。めっきり寒くなりこたつを出してしまってから、自宅ではこたつの中にこもりっきりになってしまいました。気を抜くと冬眠してしまいそうです。

さて、前回は入力項目の見た目を変えるCSSを紹介しました。

今回はラジオボタンとチェックボックスをテキストを含んだボタンにする方法を紹介します。必要なものはHTMLとCSSです。

ラジオボタンをつなげて見せる

複数のラジオボタンが横につながっているように表示する方法です。

↓各タブを押すと記述サンプルが表示されます。

See the Pen bpVdoj by ryosuke (@efonavi) on CodePen.

ポイントはラベルの表示です。ラジオボタン自体は非表示にし、ラベルでボタンを再現しています。セレクター”input[type=”radio”]:checked + label”によってラジオボタンのon/offの違いをラベルの表示に反映させています。

:checkedはラジオボタンがonの場合のみ効くようにする疑似クラスです。+は後ろの要素を指定します。つまり”input[type=”radio”]:checked + label “は「onになったラジオボタンの次にあるlabel」を指定するセレクタになります。

labelのfor属性に直前のラジオボタンを指定することで、ラベルがラジオボタンのように動くようになっています。

:first-of-type、:last-of-typeはそれぞれ最初と最後の要素を指定する疑似クラスです。最初と最後の要素を角丸にしてひとつのまとまりに見えるようにしています。

ボタンを表のようにつなげる

次は縦もつなげて表のような見た目にしてみましょう。

See the Pen eZpNop by ryosuke (@efonavi) on CodePen.

ポイントは横並びの場合とほぼ同じです。横並びのボタンを縦に並べて角丸等を調整していいます。

注意点として、綺麗に並べるためにラベルの幅と高さを指定してやる必要がある点が横並びの場合と異なります。

チェックボックスを表のようにつなげる

チェックボックスも同様の方法で表示の変更が可能です。

See the Pen grPrMg by ryosuke (@efonavi) on CodePen.

※Firefox,IEでは、チェックマークが正しく表示されません

これも基本的にラジオボタンと同じです。疑似要素:beforeと:afterを利用して修飾しています。チェックボックスのon/offで疑似要素が変わることで見た目が変わっています。

HTMLとCSSを工夫すれば入力項目の見た目も自由自在

今回はHTMLとCSSでラジオボタンとチェックボックスの見た目を変える方法を紹介しました。テキスト入りのラジオボタンやチェックボックスを表示できるので、アプリのようなフォームも作成可能になります。

CSSを工夫してボタンの見た目もサイトに合わせてみてはいかがでしょうか。