問題13:チェックボックスをカスタムしよう
チェックボックスをカスタムしよう!
見本を動画を参考に作成してください。
見本を動画を参考に作成してください。
期待する画面
解答ソースコード
<div class="checkbox">
<input type="checkbox" name="" id="checkInput" class="checkbox-input">
<label class="checkbox-parts" for="checkInput">チェックボックスをカスタムしよう!</label>
</div>
¥HTML¥
.checkbox {
text-align: center;
color: #79808A;
margin-top: 60px;
}
.checkbox-input{
display: none;
}
.checkbox-parts{
position: relative;
padding-left: 38px;
cursor: pointer;
}
.checkbox-parts::before{
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
width: 23px;
height: 23px;
border: 2px solid #79808A;
border-radius: 4px;
}
.checkbox-input:checked + .checkbox-parts::after{
display: block;
position: absolute;
top: -2px;
left: 13px;
width: 11px;
height: 19px;
transform: rotate(40deg);
border-right: 3px solid red;
border-bottom: 3px solid red;
content: "";
}
.checkbox-input:checked + .checkbox-parts::before {
border: 2px solid red;
}
¥CSS¥
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
これまで初級/中級でやった問題の総集編です。