css - 有没有办法让复选框浏览器独立？

Question

是否有可能使复选框在浏览器中简单且一致。这基本上意味着我不希望浏览器将其 native 样式应用于复选框元素。

此外，我不想使用任何用图像替换复选框并执行这些操作的插件。

是否可以通过覆盖默认 CSS 或其他方式来实现它？

Answer 1

如果我没理解错的话，你可以像这样模仿复选框:

JSFiddle Example

这里我使用超棒的字体在选中时在复选框内显示 V 符号。

首先我们隐藏真实的复选框，然后我们定义标签并使用标签的 for="simpleCheckbox" 属性将其与我们的复选框相关联，我们需要它才能点击获得焦点的标签并将其发送到要检查的真实复选框，然后使用 :before 伪元素我们定义我们的自定义外观复选框。

HTML:

<div class="visual-checkbox-container">
        <input type="checkbox" class="simple-checkbox" name="simpleCheckbox" id="simpleCheckbox"  />
        <label class="visual-checkbox" for="simpleCheckbox">
            Check Me If You Dare !
        </label>
</div>

CSS:

.visual-checkbox-container {
  margin: 20% 5%;
}

.simple-checkbox {
 display: none;
}

 .visual-checkbox {
 width: 11em;
 height: 50px;
 position: relative;
 display: inline-block;
 padding: 1.5em 0 0 0;
}

  .visual-checkbox:before {
 content: "";
 position: absolute;
 display: block;
 left: 0;
 top: 0;
 border-radius: 25%;
 box-shadow: .4px 1px 3px 0 rgba(154, 154, 154, 0.71) inset, -.5px -.4px 3px 0 rgba(154, 154, 154, 0.40) inset;
 background-color: #fff;
 width: 15px;
 height: 15px;
 }

  .visual-checkbox:focus:before , .visual-checkbox:hover:before {
 box-shadow: .5px .5px 2px 0 rgba(72, 217, 91, 0.70),  -.5px -.5px 2px 0 rgba(72, 217, 91, 0.70) , .2px .5px 3px 0 rgba(72, 217, 91, 0.90) inset, -.5px -.2px 3px 0 rgba(72, 217, 91, 0.90) inset;
 }


 .simple-checkbox:checked + .visual-checkbox:before {
 box-shadow: .5px .5px 2px 0 rgba(72, 217, 91, 0.76),  -.5px -.5px 2px 0 rgba(72, 217, 91, 0.76);
 background-color: rgba(78, 183, 91, 0.90);
}

.simple-checkbox:checked + .visual-checkbox:after {
 font-family:  FontAwesome;
 content: "\f00c";
 position: absolute;
 left: 0;
 top: 0;
 color:  #fff;
 font-size: .9em;
 }

当然可以做不同的设计。