今回は、お問い合わせフォームでよく見る以下の画像のようなチェックボックスのレイアウトを変更する方法を解説していきます。
目次
チェックボックスのレイアウトを変更する方法
チェックボックスのレイアウトを変更する方法は、以下の手順で行います。
1.input要素とlabel要素を『id』と『for』で紐付けする。 2.input要素を『display: none;』にする。 3.label要素に、beforeとafterの擬似要素をつけ、チェックボックスのレイアウトをする |
コード例
HTML
<div class="contact__form-box2">
<input type="checkbox" name="" id="private">
<label for="private">個人情報保護方針に同意する</label>
</div>
CSS
//input要素を消す
.contact__form-box2 input {
display: none;
}
//before、afterにposition:relative;をつけるため、absoluteを指定
.contact__form-box2 label {
padding-left: 40px;
position: absolute;
}
//クリックした時のチェックアイコンのレイアウトを指定
.contact__form-box2 label:before {
opacity: 0;
content: "";
display: inline-block;
width: 7px;
height: 15px;
border-right: 4px solid #4973FF;
border-bottom: 4px solid #4973FF;
transform: rotate(45deg);
position: absolute;
top: -3px;
left: 8px;
}
//ボックスの枠のレイアウトを指定
.contact__form-box2 label:after {
content: "";
display: block;
width: 20px;
height: 20px;
border: 1px solid #3E3E3E;
position: absolute;
top: 0;
left: 0;
}
//チェックボックスをクリックしたらチェックアイコンが出るように指定
.contact__form-box2 input[type=checkbox]:checked + label:before {
opacity: 1;
}
//チェックボックスをマウスホバーした時に枠が青色に変化するように指定
.contact__form-box2 input[type=checkbox]:hover + label:after {
border: 1px solid #4973FF;
cursor: pointer;
}
ブラウザでの表示
See the Pen NWrMNpa by ryu (@ryu-no-sss) on CodePen.
1.input要素とlabel要素を『id』と『for』で紐付け
コード例のHTMLを見ていただくと、input要素のid属性の名前と、label要素のfor属性の名前が同じであることがわかります。
このことで、input要素とlabel要素が紐付けされます。
2.input要素を『display: none;』にする
これは、文章通りで、input要素を『display: none;』にします。
理由は、input要素の初期レイアウトを消すためです。
3.label要素に、beforeとafterの擬似要素をつけ、チェックボックスのレイアウトをする
以下の画像のように、擬似要素をレイアウトしています。
:before ➡️ チェックのレイアウト :after ➡️ ボックスのレイアウト |
:before内のプロパティの解説
//クリックした時のチェックアイコンのレイアウトを指定
.contact__form-box2 label:before {
//クリック前は、表示させたくないため、透明に設定している
opacity: 0;
//このプロパティがないとブラウザに表示されない
content: "";
display: inline-block;
//width・height・borderでチェックをレイアウト
width: 7px;
height: 15px;
border-right: 4px solid #4973FF;
border-bottom: 4px solid #4973FF;
//borderを回転させている
transform: rotate(45deg);
//チェックの位置を指定
position: absolute;
top: -3px;
left: 8px;
}
//チェックボックスをクリックしたらチェックアイコンが出るように指定
.contact__form-box2 input[type=checkbox]:checked + label:before {
opacity: 1;
}
:after内のプロパティの解説
//ボックスの枠のレイアウトを指定
.contact__form-box2 label:after {
//このプロパティがないとブラウザに表示されない
content: "";
display: block;
//width・height・borderでボックスの枠をレイアウト
width: 20px;
height: 20px;
border: 1px solid #3E3E3E;
//ボックスの位置を指定
position: absolute;
top: 0;
left: 0;
}
まとめ
1.input要素とlabel要素を『id』と『for』で紐付けする。 2.input要素を『display: none;』にする。 3.label要素に、beforeとafterの擬似要素をつけ、チェックボックスのレイアウトをする |
それでは、最後まで読んでいただきありがとうございました。
タグ
