1

cssのみを使用して画像を使用せずにカスタムチェックボックスを作成しようとしていますが、少し問題があります。

オンラインでいくつかのチュートリアルに従いましたが、障害にぶつかったようで、助けていただければ幸いです。

私のcssは次のようになります

input[type='checkbox'] {
  -webkit-appearance: none;
  background: #dee1e2;
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  border: 1px solid #555;
  position: relative;
  bottom: .3em;
}

input[type='checkbox']:checked {
    -webkit-appearance: none;
    background: #dee1e2;
    width: 1.3em;
    height: 1.3em;
    border-radius: 5px;
    position: relative;
    bottom: .3em;
    -webkit-transform: rotate(45deg);
}

ボックス全体を回転させ、 :after を追加しようとしましたが、何もしなかったようです。

4

2 に答える 2