如何仅用 html+css 而没有图像替换默认的 html 复选框？答案

【问题标题】：How to replace default html checkbox with just html+css and no images?如何仅用 html+css 而没有图像替换默认的 html 复选框？
【发布时间】：2015-12-01 04:46:32
【问题描述】：

我想用显示在复选框顶部的样式 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>

可以吗？

谢谢！

【问题讨论】：

你可以使用隐藏的复选框吗？

标签： html css checkbox

【解决方案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; }

    &lt;label class="fancyCheckBox"&gt;&lt;input type="checkbox" name="" checked /&gt;&lt;span&gt;&amp;check;&lt;/span&gt;&lt;/label&gt;

【讨论】：

【解决方案2】：

要快速获取，只需复制并粘贴下面的代码或观看DEMO。

<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;
}

我使用了一个跨度以及带有类型复选框的输入并将其隐藏。现在，我没有为 span 使用背景图像，而是给出了您在问题中提到的属性，但还添加了 display:block 的属性，因为我使用的 span 标签不是块元素。 p>

当输入被选中时 input:checked + span 选择器用于选择跨度并再次选择您提到的属性。

注意：如果您使用 span 标签或任何其他内联元素，请务必添加 display: 块。

【讨论】：

【解决方案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('&check;');
  } else {
    el.removeClass('checked').addClass('unchecked');
    el.empty();
  } 
})

演示可以看这里

https://jsfiddle.net/nnrv06vz/

【讨论】：

【解决方案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/

【讨论】：