チェックボックスとラジオボタンのデザインをCSSで変更する方法を超絶優しく解説する

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

 はい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。
 デザイン上デフォルトのチェックボックスやラジオボタンを使う場合はほぼありえませんからね。

目次

カスタマイズの概要

 チェックボックスやラジオボタンのカスタマイズは、元々のボタンをカスタムするのではなく「それらを削除した上で新しく作り直す」という流れになります。

画像はラジオボタンを例にしていますが、
チェックボックスも同様です。

手順としては、

  1. HTMLを用意
  2. デフォルトのボタンを消す
  3. 新しく見た目を用意
  4. ボタンとして機能するようにする

となります。

チェックボックスは見た目を変更する部分のみ異なるので、最後に載せます。
チェックボックスの見た目の変更

実際にカスタマイズしてみる

ラジオボタン、チェックボックスの順番で解説していきます。

1. HTMLを用意

上のコードで下の画像のようになります。デフォルトのボタンですね。
文字の部分はあとで個別にスタイルを当てたいので、spanタグで囲いクラスも用意します。

また、全ての要素をborder-boxにしておきましょう。サイズ指定がわかりやすくなります。

デフォルトのボタンを消す

続いて、ボタンを消します。inputタグに以下の指定でボタンのみ消えます。(コメントより修正)

以下の状態になります。

新しく見た目を用意

ここから少しややこしくなります。

見た目を作るには、擬似要素の::beforeと::afterを使います。

まずは形だけ作りましょう。

これで以下の状態になります。

このように、ボタンの外側と内側のパーツが表示されました。また::before, ::afterをdisplay: blockにしたので並びが縦になっています。

続いて、それぞれのパーツの位置を調整します。縦方向から揃えていきましょう。

このように縦方向が揃います。また、::afterをpositionプロパティで位置調整をしたいので、この段階で.Radio-Textにposition: relative;を指定しておきます。

そして、横方向にパーツを揃えます。

以下のようになりましたか?

leftの数値は、外側のパーツのwidth/2 – 内側のパーツのwidth/2で算出します。
16/2 – 10/2 = 8 – 5 = 3pxということです。(適当に数値決めて見た目がいい感じになるポイントを探す方が早かったりします。)

ボタンとして機能するようにする

::afterで作った内側のパーツは、ラジオボタンがオンの時にのみ表示されます。そこで、:checkedという擬似セレクタを使います。この擬似セレクタは、選択中のラジオボタンやチェックボックスに対してスタイルを適用させることができます。

しかし、今回はオンオフで切り替えたい対象はinputタグではなく隣接したspanタグの::afterです。

そこで、隣接セレクタを使って対応します。.Radio-Text::afterに.Radio-Input:checkedを隣接セレクタ、+で繋げます。

こうすると、要素をクリックした時にのみ中のパーツが現れます。

これでラジオボタンの見た目を変更することができました。

チェックボックスの見た目の変更

HTML

CSS

HTMLの構造はラジオボタンと同じで、クラス名だけ違います。
この記述で以下のようになります。

外側のパーツは正方形で、中のパーツは長方形の右と下の辺だけborderをつけます。この中のパーツを回転させてチェックマークを作ります。

transformプロパティを使って回転させることで、以下のようになります。

これでチェックボックスも完成です。

まとめ

いかがでしたでしょうか。HTML/CSSを学んでいてもあまり出会いにくい内容でありながら実務ではほぼ必須となる技術、ぜひ覚えてみてください!

この記事を読んだ方におすすめの記事

HTMLにおける、上手に比率維持した画像を作る方法(imgタグ/background-image)

2019年6月4日

input type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。

2019年2月11日

2 件のコメント

  • はじめまして。
    単刀直入に申し上げますとinputをdisplay:noneするのは間違っています。
    理由としてはTab移動できずアクセシビリティ面が悪くなるからです。
    物事を教える立場の人間が誤った情報を伝えるのはいかがかと思います。

  • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください