チェックボックスの色とサイズをCSSで変更する方法

CSS
質問する生徒
生徒

サイトのイメージと合わないのでチェックボックスに装飾したいんですよ。

質問する生徒
生徒

チェックボックスをCSSで装飾
チェックボックスをCSSでオシャレに
チェックボックスのサイズと大きさをCSSで変更

これだとダサいというか・・・

回答する先生
先生

分かりました。チェックボックの色とサイズをCSSで変更する方法を教えますね!

回答する先生
先生



チェックしてチェックマークも確認してください。

質問する生徒
生徒

このチェックボックスを装飾する方法教えてください。

チェックボックスの色とサイズを変更するCSSの順番はこのようになってます。

  1. チェックボックス全体の設定
  2. デフォルトチェックボックスを非表示
  3. 装飾チェックボックスの作成
  4. 装飾チェックマークの作成
  5. チェック有り装飾チェックボックスの表示
  6. チェック有り装飾チェックボックスの表示
/* チェックボックスの範囲全体 */
.checkbox-area {
display: block;
position: relative;
padding-left: 30px;
font-size: 15px;
}
/* デフォルトcheckboxを非表示 */
.checkbox-area input {
display: none;
}
/* 装飾チェックボックス */
.checkbox-area .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
border: 2px solid #006600;
box-sizing: border-box;
}
/* 装飾チェックマーク */
.checkbox-area .checkmark:after {
content: "";
position: absolute;
display: none;
left: 55%;
top: -50%;
width: 60%;
height: 120%;
border: 5px solid #006600;
border-width: 0 5px 5px 0;
transform: rotate(45deg);
}
/* チェック有り装飾チェックマーク */
.checkbox-area input:checked+.checkmark {
border: 2px solid #006600;
}
/* チェック有り装飾チェックマーク表示 */
.checkbox-area input:checked+.checkmark:after {
display: block;
}
<label class="checkbox-area"><input type="checkbox" checked="checked"/><span class="checkmark"></span>チェックボックスをCSSで装飾</label>
<label class="checkbox-area"><input type="checkbox" /><span class="checkmark"></span>チェックボックスをCSSでオシャレに</label>
<label class="checkbox-area"><input type="checkbox" /><span class="checkmark"></span>チェックボックスのサイズと大きさをCSSで変更</label>
質問する生徒
生徒

ありがとうございます!コピペしてフォントカラーを変えて使わせてもらいます。

回答する先生
先生

サイト、端末に合わせてサイズ調整して使ってください。