html - 如何仅使用 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 with 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>