如何自定義複選框，使其看起來與附加的圖像相似？

Question

如何在html表單中設置多個複選框，以便複選框的外觀與所附圖像中顯示的相似？

Answer 1

您必須手動自定義input & label使用僞元素讓你想在這裏的複選框效果的一種方式。

我建你演示引用，請檢查下面的代碼：

[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
[type="checkbox"]:not(:checked) + label, 
 
[type="checkbox"]:checked + label { 
 
    position: relative; 
 
    padding-left: 25px; 
 
    cursor: pointer; 
 
} 
 

 
[type="checkbox"]:not(:checked) + label:before, 
 
[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -5px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); 
 
    border-radius: 50%; 
 
    background-color: #5cf1b3; 
 
    outline: none; 
 
} 
 

 
[type="checkbox"]:not(:checked) + label:after, 
 
[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 10px; 
 
    font-size: 24px; 
 
    line-height: 0.8; 
 
    color: #fff; 
 
    transition: all .2s; 
 
} 
 

 
[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1"></label> 
 
</p>

Answer 2

這是你怎麼能沒有JavaScript的做到這一點。不過，您可以自定義外觀。

li { 
 
    width:200px; 
 
    list-style:none; 
 
    position:relative; 
 
    height: 30px; 
 
    line-height:30px; 
 
    margin:10px 0; 
 
} 
 

 
label{ 
 
    cursor:pointer; 
 
    width:100%; 
 
    float:left; 
 
} 
 

 
input[type=checkbox] { 
 
    appearance:none; 
 
    -webkit-appearance:none; 
 
    -moz-appearance:none; 
 
} 
 

 
input[type=checkbox]:after { 
 
    content: ""; 
 
    width: 30px; 
 
    height: 30px; 
 
    background:url("http://www.clker.com/cliparts/c/C/o/E/v/d/check-no-md.png") no-repeat; 
 
    background-size:contain; 
 
    top: 0px; 
 
    right: 0px; 
 
    position: absolute; 
 
    display: inline-block; 
 
} 
 

 
input[type=checkbox]:checked:after { 
 
    content: ""; 
 
    width: 30px; 
 
    height: 30px; 
 
    background:url("http://www.clker.com/cliparts/u/3/i/2/t/D/check-yes-md.png") no-repeat; 
 
    background-size:contain; 
 
    top: 0px; 
 
    right: 0px; 
 
    position: absolute; 
 
    display: inline-block; 
 
}

<ul> 
 
    <li> 
 
    <label>dededede<input name="checkbox1" type="checkbox" /></label> 
 
    </li> 
 
    <li> 
 
    <label>Checkbox1 <input name="checkbox2" type="checkbox" /></label> 
 
    </li> 
 
</ul>