如何只用html + css替換默認的html復選框而沒有圖像？

Question

我想用復選框頂部顯示的樣式div直觀地替換默認復選框元素。 我不想使用圖像。

選中后：

<div style="width: 18px; height: 18px; background: #0e0; border-radius: 3px; border: 2px solid #555; color: #fff;">&check;</div>

未選中時：

<div style="width: 18px; height: 18px; background: #ccc; border-radius: 3px; border: 2px solid #555; color: #fff;"></div>

能做到嗎

謝謝！

Answer 1

用這只css與label和css

  .fancyCheckBox> input:checked + span{width: 18px; height: 18px; background: #0e0; border-radius: 3px; border: 2px solid #555; color: #fff;display:inline-block;vertical-align:top;} .fancyCheckBox > input{display:none;} .fancyCheckBox > input + span{width: 18px; height: 18px;background: #ccc;border: 2px solid #555; color: #ccc;border-radius: 3px;display:inline-block;vertical-align:top; } 

  <label class="fancyCheckBox"><input type="checkbox" name="" checked /><span>&check;</span></label> 

Answer 2

要快速抓取，只需復制並粘貼下面的代碼，或觀看演示 。

<label for="test">Label for  "checkbox"</label>
<label class="checkboxWrapper">
    <input type="checkbox" name="test"/>
    <span></span>
</label>


.checkboxWrapper input[type="checkbox"] {
    display: none;
}
/*when unchecked*/ 
.checkboxWrapper span {
    display:block;
    width: 18px; 
    height: 18px; 
    background: #ccc; 
    border-radius: 3px; 
    border: 2px solid #555; 
    color: #fff;
}
/*when checked*/
.checkboxWrapper input:checked + span {
    display:block;
    width: 18px; 
    height: 18px; 
    background: #0e0; 
    border-radius: 3px; 
    border: 2px solid #555; color: #fff;
}

我將跨度與類型為checkbox的輸入一起使用，並將其隱藏。 現在，我沒有使用背景圖像作為跨度，而是給了您在問題中提到的屬性，但是還添加了display：block的屬性，因為我使用的不是跨度元素，而是跨度標記。

選中輸入后，輸入：checked +范圍選擇器用於選擇范圍，並再次選擇您提到的屬性。

注意：如果您使用的是span標簽或任何其他內聯元素， 請確保添加display：塊。

Answer 3

html標記

<div style="" class="unchecked chkbox"></div>

的CSS

.checked {
  width: 18px; 
  height: 18px; 
  background: #0e0; 
  border-radius:3px;
  border: 2px solid #555;
  color: #fff;
}
.unchecked {
  width: 18px;
  height: 18px; 
  background: #ccc; 
  border-radius: 3px; 
  border: 2px solid #555; 
  color: #fff;" 
}

現在的jQuery

$('.chkbox').click(function() {
  var el = $(this);
  if(el.hasClass('unchecked')) {
    el.removeClass('unchecked').addClass('checked');
    el.html('✓');
  } else {
    el.removeClass('checked').addClass('unchecked');
    el.empty();
  } 
})

演示可以在這里看到

https://jsfiddle.net/nnrv06vz/

Answer 4

 Here is simple html , you can use this :

 HTML :

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

 CSS :

  /* Base for label styling */
  [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;
 line-height: 19px;
 cursor: pointer;
}
/* checkbox aspect */
 [type="checkbox"]:not(:checked) + label:before,
 [type="checkbox"]:checked + label:before {
 content: '';
 position: absolute;
 left:0; top: px;
 width: 17px; height: 17px;
 border: 1px solid #aaa;
 background: #f8f8f8;
 border-radius: 3px;
 box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
 /* checked mark aspect */
 [type="checkbox"]:not(:checked) + label:after,
 [type="checkbox"]:checked + label:after {
 content: '✔';
 position: absolute;
 top: 3px; left: 4px;
 font-size: 16px;
 line-height: 0.8;
 color: #000;
 transition: all .2s;
 }
 /* checked mark aspect changes */
 [type="checkbox"]:not(:checked) + label:after {
 opacity: 0;
 transform: scale(0);
}
  [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
 }
 /* disabled checkbox */
 [type="checkbox"]:disabled:not(:checked) + label:before,
 [type="checkbox"]:disabled:checked + label:before {
 box-shadow: none;
 border-color: #bbb;
 background-color: #ddd;
}
/* accessibility */

http://jsfiddle.net/erasad22/gn5Lph6L/