这个想法是隐藏实际的表单元素(因为浏览器用内部样式进行硬替换,并且不会将所有风格能力都暴露给css),并将其替换为我们喜欢的样式.一个副作用是,您需要跟踪更改事件,而不是单击JS中的事件(如果需要)(但是您仍然在做这些事情)？

因为标签是绑定到表单元素点击它的工作原理就像预期的那样,所以新的,真棒的复选框(:: before)滥用属性选择器([checked])在原件上检查是否被检查.当它被检查它将显示我们的awesomer复选标记(::之后).

复选标记(:: after)滥用边框宽度的厚度和高度/宽度,以使一个复选标记像项目.最后,我们将盒子45deg转换成正确的角度.

要更改勾号的颜色,请更改:: after style上的边框颜色.另外,如果你希望它总是匹配你的文本颜色,就可以完全删除它的边框颜色.要更改收音机,请更改渐变起始颜色(不是白色的渐变颜色).

也很棒的是它绑定到字体大小,所以如果你的文本更大,它应该垫在正确的(尽管四舍五入的错误可能会发生在使用相对的字体大小时,所以要小心)

我已经包含了两种检查类型的基本样式(复选框和收音机).

HTML：

<fieldset>
    <legend>CheckBox example</legend>
    <input id="checkBox" type="checkBox"/>
    <label for="checkBox">Some awesome checkBox label</label>
</fieldset>
<fieldset>
    <legend>Radio example</legend>
    <div>
        <input id="radio1" type="radio" name="radio"/>
        <label for="radio1">Some awesome radio option #1</label>
    <div>
    </div>
        <input id="radio2" type="radio" name="radio"/>
        <label for="radio2">Some awesome radio option #2</label>
    </div>
</fieldset>

CSS：

label,input[type="radio"],input[type="checkBox"] {
   line-height: 2.1ex;
}

input[type="radio"],input[type="checkBox"] {
    position: absolute;
    left: -999em;
}

input[type="radio"] + label,input[type="checkBox"] + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

input[type="radio"] + label::before,input[type="checkBox"] + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid rgb(166,166,166);
   border-radius: 4px;
   Box-shadow: inset 0 2px 5px rgba(0,0.25);
   margin-right: 0.5em;
}

input[type="radio"]:checked + label::before {
   background: radial-gradient(circle at center,#1062a4 .6ex,white .7ex);
}

input[type="radio"] + label::before {
   border-radius: 50%;
}

input[type="checkBox"]:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0,0);
   top: 0.9ex;
   left: 0.4ex;
   border: 3px solid #1062a4;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

旁注：necropost,因为这是第一个出现的问题,当我想要记住我如何把它拉过去.