Question

是否可以在浏览器中使复选框清晰且一致。这基本上意味着我不希望浏览器将其原生样式应用于复选框元素。

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

是否可以通过覆盖默认的CSS或其他东西来实现它？

Answer 1

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

这里我使用font awesome在检查时在复选框内显示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;
 }

当然，设计可以做得不同。

有没有办法使复选框浏览器独立？

1 个答案: