CSS / HTML：如何在复选框输入内更改复选标记的颜色？

这是一个纯CSS解决方案,不应该中断屏幕阅读器或默认的用户代理操作.此外,最新版本的大型4浏览器还支持这些功能(如果您添加了一些额外的黑客,还有其他几个浏览器),但是我会留下您的数据,可能不会超过IE8支持,因为它使用伪元素).

这个想法是隐藏实际的表单元素(因为浏览器用内部样式进行硬替换,并且不会将所有风格能力都暴露给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,因为这是第一个出现的问题,当我想要记住我如何把它拉过去.

大佬总结

以上是大佬教程为你收集整理的CSS / HTML：如何在复选框输入内更改复选标记的颜色？全部内容，希望文章能够帮你解决CSS / HTML：如何在复选框输入内更改复选标记的颜色？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。