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

如何在HTML复选框输入中更改复选标记的颜色？

1> Kevin Peno..：

---

这是一个纯CSS解决方案,不应破坏屏幕阅读器或默认用户代理操作.此外,最新版本的4大浏览器(以及其他一些浏览器,如果你添加一些额外的黑客攻击,支持这一点,但我会留给你去弄清楚;因为它使用它可能不会超过IE8 +支持伪元素).

这个想法是隐藏实际的表单元素(因为浏览器很难用内部样式替换,并且不会将所有样式能力暴露给css)并用我们喜欢的替换它.一个副作用是你需要跟踪更改事件而不是单击JS中的事件(如果需要的话)(但你是这样做的吗？).

因为标签与表单元素相关联,所以单击它会像预期的那样工作,因此新的,非常棒的复选框(::before)会滥用[checked]原始文件上的属性选择器()以检查它是否存在checked.检查时,它将显示我们的awesomer checkmark(::after).

checkmark(::after)滥用厚度和高度/宽度的边框宽度来制作像项目一样的复选标记.最后,我们将框45deg变换为正确匹配角度.

要更改复选标记的颜色,请更改::after样式的边框颜色.此外,如果您希望它始终与您的文本颜色匹配,请完全删除其上的边框颜色.要更改收音机,请更改径向渐变开始颜色(非白色).

同样令人敬畏的是它与字体大小有关,所以如果你的文字更大,它应该是正确的(虽然使用相对字体大小时会发生舍入错误,所以要小心)

我已经为可检查类型(复选框和广播)包含了基本样式.

HTML:

    
Checkbox example
    
    Some awesome checkbox label


    
Radio example
    

        
        Some awesome radio option #1
    

    
        
        Some awesome radio option #2
    

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,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, 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因为这是第一个问题,当我试图记住我过去如何解决这个问题时突然出现.;)

---

任何支持较新的双冒号伪元素（几乎是IE9 +以及其他所有元素）的东西。对于完整的渐进增强解决方案，我尚未解决的唯一问题就是复选框本身的位置。因此，就目前而言，它将使该复选框在IE8及以下版本中消失，但标签仍将导致该项目进行检查（不是这样可以节省可用性问题）。如果将双冒号更改为单并使用ms的旧过滤器进行旋转，则可能会将其降级为IE8 +支持，但我尚未对其进行测试。最好的办法是找到解决第一题的方法

2> xandercoded..：

---

您可以创建一个复选框图像并将其用作复选框

以下帖子讨论了自定义输入控件......

http://www.thecssninja.com/css/custom-inputs-using-css