サイトのイメージと合わないのでチェックボックスに装飾したいんですよ。
チェックボックスをCSSで装飾
チェックボックスをCSSでオシャレに
チェックボックスのサイズと大きさをCSSで変更
これだとダサいというか・・・
分かりました。チェックボックの色とサイズをCSSで変更する方法を教えますね！
チェックしてチェックマークも確認してください。
このチェックボックスを装飾する方法教えてください。
チェックボックスの色とサイズを変更するCSSの順番はこのようになってます。
- チェックボックス全体の設定
- デフォルトチェックボックスを非表示
- 装飾チェックボックスの作成
- 装飾チェックマークの作成
- チェック有り装飾チェックボックスの表示
- チェック有り装飾チェックボックスの表示
/* チェックボックスの範囲全体 */
.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>ありがとうございます！コピペしてフォントカラーを変えて使わせてもらいます。
サイト、端末に合わせてサイズ調整して使ってください。
コメント