ログイン
問題13

チェックボックスをカスタムしよう

アイコン画像

問題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¥
            

コメントのアイコン解説

check後の挙動を上手く設定しましょう。

これまで初級/中級でやった問題の総集編です。
ログインして解答を見る
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる