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

要快速抓取，只需复制并粘贴下面的代码或观看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;
}

我使用了带有类型复选框的输入并将其隐藏起来。现在，我没有使用跨度的背景图像，而是给出了您在问题中提到的属性，但也添加了 display：block 的属性，因为我使用的是不是块元素的span标记。

选中输入时输入：选中+ span 选择器用于选择范围，并再次选择您提到的属性。

注意：如果您使用的是span标记或任何其他内联元素，请务必添加display：block。

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('&check;');
  } 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/

如何用html + css和没有图像替换默认的html复选框？

4 个答案: