使用自己的样式图像设置 html 复选框 [重复]

Question

谁能告诉我如何更改默认样式：

<input type=checkbox...>

所以它会使用我的 2 张样式图片而不是默认样式？？

tnx！！

Answer 1

试试这个。您可以通过首先删除默认样式来替换默认单选框/复选框，然后应用伪元素，如 sn-p 所示。

PS：为此，请使用 font-awesome 库

.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: rebeccapurple;
    color: #fff;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #bbb;
}

.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd; /* focus style */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
HTML  CSS   Result
Edit on 
    <form>
        <h2>CSS Radio Buttons and checkboxes: Border</h2>
        <h5>Checkboxes and radio buttons with a border checked state: Pure CSS</h5>
        <p><em>Uses an inset box shadow for the bordered effect on the checked state.</em></p>
        <br>
        <h2>Radio Buttons</h2>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>

      <h2>Checkboxes</h2>
      <div>
        <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
      </div>
      <div>
        <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
        <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
      </div>
      <div>
        <input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
        <label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>    
        </div>
      </div>
    </form>

Answer 2

您应该使用 css 更改 checkbox 旁边的元素。 在此示例中，它是背景颜色。只需将其替换为您的图片即可。

例如：https://css-tricks.com/the-checkbox-hack/

input[type=checkbox] {
   visibility: hidden;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Default State */
label {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ label {
   background: red;
}

<input type="checkbox" id="toggle-1">
<label for="toggle-1">Do Something</label>