checkbox - html - チェックボックス css ボタン - CSSによるチェックボックスのスタイル設定方法

css チェックボックス 色 / html / css

以下の方法でチェックボックスのスタイルを設定しようとしています。

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Peter Mortensen



Answer #1
.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>