Webデザイン

【PR】を含みます。

【CSS】チェックボックスのデザインをカスタマイズする方法

CSS チェックボックスのデザインをカスタマイズする方法

CSSでチェックボックスのデザインをカスタマイズする方法を解説します。

inputタグ(チェックボックス)に疑似用を使用せずに、デザインをカスタマイズする方法を紹介しています。

【テンプレート】チェックボックスのデザインをカスタマイズ

サンプル

実装コード

HTML
Copy
  1. <label class="checkbox_container">
  2.   <input class="checkbox" type="checkbox">
  3.   チェックボックス
  4. </label>
CSS
Copy
  1. .checkbox_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. /* チェック前のデザイン */
  7. .checkbox {
  8.   appearance: none; /* デフォルトスタイルを削除 */
  9.   -webkit-appearance: none; /* Safari and Chrome */
  10.   -moz-appearance: none; /* Firefox */
  11.   margin: 0;
  12.   margin-right: 3px;
  13.   width: 15px;
  14.   height: 15px;
  15.   vertical-align: middle;
  16.   border-radius: 3px;
  17.   border-width: 1px;
  18.   border-style: solid;
  19.   border-color: #c6c6c6;
  20.   background-color: #fff;
  21.   position: relative;
  22.   top: -2px;
  23. }
  24.  
  25. /* チェック後のデザイン */
  26. .checkbox:checked {
  27.   border-color: #f09896;
  28.   background-color: #f09896;
  29.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  30.   background-size: 100% auto;
  31.   background-repeat: no-repeat;
  32.   background-position: center;
  33. }

コード解説

チェック前のデザイン

appearance: none;
チェックボックスのデフォルトスタイルを削除します。
これにより、カスタムスタイルが適用可能になります。
margin: 0;
チェックボックスの余白をリセットします。
margin-right: 3px;
チェックボックスの右側に3pxの余白を追加します。
width: 15px;
チェックボックスの幅を指定します。
height: 15px;
チェックボックスの高さを指定します。
vertical-align: middle;
チェックボックスを縦方向に中央揃えします。
border-radius: 3px;
角を丸くします。
border-width: 1px;
ボーダーの幅を指定します。
border-style: solid;
ボーダーのスタイルを指定します。
border-color: #c6c6c6;
ボーダーの色を指定します。
background-color: #fff;
背景色を設定します。
position: relative;
top: -2px;
チェックボックスの位置を微調整します。

チェック後のデザイン

.checkbox:checked
チェックボックスがチェックされた状態のスタイルを指定できます。
border-color: #f09896;
チェックされたときのボーダーの色を指定します。
background-color: #f09896;
チェックされたときの背景色を指定します。
background-image
SVG形式のチェックマーク画像をデータURIとして埋め込んでいます。
これにより、外部画像を使用せずにチェックマークを表示できます。
SVGを使用しているため高解像度でも綺麗な表示が可能です。
background-size: 100% auto;
背景画像のサイズを指定します。
幅を100%に設定し、高さは自動調整しています。
background-repeat: no-repeat;
背景画像を繰り返さないようにします。
background-position: center;
背景画像を中央に配置します。

チェック時のチェックボックスの背景は白色で矢印の色を変更

サンプル

実装コード

矢印の色は、SVG形式のチェックマーク画像（background-image）のstroke="%23f09896"で指定しています。

stroke="%23f09896"の%23は # 記号に対応し、f09896が16進数カラーコードです。

HTML
Copy
  1. <label class="checkbox_container">
  2.   <input class="checkbox2" type="checkbox">
  3.   チェックボックス
  4. </label>
CSS
Copy
  1. .checkbox_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. /* チェック前のデザイン */
  7. .checkbox2 {
  8.   appearance: none; /* デフォルトスタイルを削除 */
  9.   -webkit-appearance: none; /* Safari and Chrome */
  10.   -moz-appearance: none; /* Firefox */
  11.   margin: 0;
  12.   margin-right: 3px;
  13.   width: 15px;
  14.   height: 15px;
  15.   vertical-align: middle;
  16.   border-radius: 3px;
  17.   border-width: 1px;
  18.   border-style: solid;
  19.   border-color: #f09896;
  20.   background-color: #fff;
  21.   position: relative;
  22.   top: -2px;
  23. }
  24.  
  25. /* チェック後のデザイン */
  26. .checkbox2:checked {
  27.   background-color: #fff;
  28.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f09896" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  29.   background-size: 100% auto;
  30.   background-repeat: no-repeat;
  31.   background-position: center;
  32. }

チェックボックスから矢印をはみ出させる

サンプル

実装コード

HTML
Copy
  1. <label class="checkbox_container">
  2.   <input class="checkbox3" type="checkbox">
  3.   <span class="checkmark"></span>
  4.   チェックボックス
  5. </label>
CSS
Copy
  1. .checkbox_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. .checkbox3 {
  7.   margin: 0;
  8.   width: 0;
  9.   height: 0;
  10.   opacity: 0;
  11. }
  12.  
  13. /* チェック前のデザイン */
  14. .checkmark {
  15.   display: inline-block;
  16.   height: 15px;
  17.   width: 15px;
  18.   margin-right: 3px;
  19.   background-color: #fff;
  20.   border: 1px solid #f09896;
  21.   border-radius: 3px;
  22.   position: relative;
  23.   top: 2px;
  24. }
  25.  
  26. /* チェック後のデザイン */
  27. .checkbox3:checked + .checkmark::after {
  28.   content: '';
  29.   display: inline-block;
  30.   width: 220%;
  31.   height: 220%;
  32.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f09896" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  33.   background-size: 100% auto;
  34.   background-repeat: no-repeat;
  35.   background-position: center;
  36.   position: absolute;
  37.   top: 30%;
  38.   left: 50%;
  39.   transform: translate(-50%, -50%);
  40. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-,