CSS / HTML：如何更改复选框输入内复选标记的颜色？ [英] CSS/HTML: How do I change the color of the check mark within the checkbox input?

问题描述

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

解决方案

应该不会打破屏幕阅读器或默认用户代理操作。此外，这是支持在最新版本的大4浏览器（和一些其他如果你添加一些额外的黑客，但我会离开这让你明白;可能不会得到超过IE8 +支持，因为它使用伪元素）。

这个想法是隐藏实际的表单元素（因为浏览器用内部样式进行硬替换，并且不会将所有样式能力都暴露给css ）并替换为我们喜欢的。一个副作用是，如果你需要它，你将想跟踪更改事件而不是点击事件（但是你是这样做的反正）。

因为（ :: before ）会使用属性选择器（ [已检查] ）以检查是否已检查。当它被选中时，它将显示我们的awesomer选中标记（ :: after 后）。





$ c> :: after ）滥用边框宽度的厚度和高度/宽度来做一个复选标记像项目。最后，我们转换框45deg以适当地匹配角度。

要更改复选标记的颜色，请更改上的边框颜色： ：后样式。此外，如果你想让它总是匹配你的文字颜色，删除它的边框颜色。要更改收音机，请更改辐射渐变开始颜色（不是白色的开始颜色）。

同样令人敬畏的是它与字体大小相关，更大，应该正确填充（虽然使用相对字体大小时可能会发生舍入错误，请小心）

我已经包含了两个可用的基本样式

code>< fieldset>
< legend>复选框示例< / legend>
< input id =checkboxtype =checkbox/>
< label for =checkbox>一些令人敬畏的复选框标签< / label>
< / fieldset>
< fieldset>
< legend>收音机示例< / legend>
< div>
< input id =radio1type =radioname =radio/>
< label for =radio1>一些真棒无线电选项＃1< / label>
< div>
< / div>
< input id =radio2type =radioname =radio/>
< label for =radio2>一些真棒收音机选项＃2< / label>
< / div>
< / fieldset>

CSS：

  label，input [type =radio]，input [type =checkbox] {
 line-height：2.1ex; 
} 
 
输入[type =radio]，
输入[type =checkbox] {
 position：absolute; 
 left：-999em; 
} 
 
输入[type =radio] +标签，
输入[type =checkbox] +标签{
 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是因为这是第一个问题，试图记住我是如何把这个过去。 ;）

How do I change the color of the check mark within an HTML checkbox input?

解决方案

Here's a pure CSS solution that shouldn't break screen readers or default user agent actions. Additionally, this is supported in the latest versions of the big 4 browsers (and a few others if you add some additional hacks, but I'll leave that to you to figure out; probably won't get more than IE8+ support since it uses pseudo elements).

The idea is to hide the actual form element (because browsers do a hard replace with internal styles and don't expose all style-ability to css yet) and replace it with one we like. One side effect is that you will want to track change events rather than click events in your JS if you need it (but you were doing that anyway right?).

Because the label is tied to the form element clicking it works like one would expect, so the new, awesome, checkbox (::before) abuses attribute selectors ([checked]) on the original to check if it is checked. When it is checked it will display our awesomer checkmark (::after).

The checkmark (::after) abuses border width for thickness and height/width for making a checkmark like item. Finally, we transform the box 45deg to match the angle up properly.

To change the color of the checkmark, change the border color on the ::after style. Additionally, if you wanted it to always match your text color remove the border color on it altogether. To change the radio, change the radial gradient start color (the one that isn't white).

Also awesome is that its tied to font size, so if your text is bigger, it should shim right in (though rounding errors can happen when using relative font sizes, so be careful)

I've included basic styles for both check-able types (checkbox and radio).

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,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);
}

Side note: necropost because this was the first question that popped up when I was trying to remember how I pulled this off in the past. ;)

这篇关于CSS / HTML：如何更改复选框输入内复选标记的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！