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

Question

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

Answer 1

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

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

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

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

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

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

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

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

旁注:necropost因为这是第一个问题,当我试图记住我过去如何解决这个问题时突然出现.;)

Answer 2

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

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

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

Answer 3

你可以这样做。

input[type='checkbox']:checked {
  background-color: #023047;
}
input[type='checkbox']:checked:after {
  content: '\2713';
  color:white;
}
input[type='checkbox']{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 20px !important;
  height: 20px !important;
  appearance:none;
  border-radius:10%;
  border: 1px solid rgb(191 35 42 / 90%);
  box-shadow: none;
  font-size: 1em;
}

<input type="checkbox" > checkbox 1
<input type="checkbox" > checkbox 2