CSS/HTML：如何更改复选框输入中复选标记的颜色？ [复制]

Posted 2023-02-21

【中文标题】CSS/HTML：如何更改复选框输入中复选标记的颜色？ [复制]

【英文标题】：CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

【发布时间】：2011-02-08 00:33:30

【问题描述】：

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

【问题讨论】：

Here are several hints

【参考方案1】：

你可以这样做。

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

【参考方案2】：

选中此项它将向您展示如何设置复选框的样式 How to create a custom checkbox 不用JS也可以

/* Customize the label (the container) */
.container 
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;


/* Hide the browser's default checkbox */
.container input 
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;


/* Create a custom checkbox */
.checkmark 
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;


/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark 
  background-color: #ccc;




/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after 
  content: "";
  position: absolute;
  display: none;


/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after 
  display: block;


/* Style the checkmark/indicator */
.container .checkmark:after 
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);


/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark 
  background-color: #2196F3;


.container input.white:checked ~ .checkmark:after 
  border: solid white;
  border-width: 0 3px 3px 0;

.container input.black:checked ~ .checkmark:after 
  border: solid #000;
  border-width: 0 3px 3px 0;

.container input.red:checked ~ .checkmark:after 
  border: solid #cb1a1a;
  border-width: 0 3px 3px 0;

.container input.green:checked ~ .checkmark:after 
  border: solid #1f4f12;
  border-width: 0 3px 3px 0;

.container input.yellow:checked ~ .checkmark:after 
  border: solid #c6c253;
  border-width: 0 3px 3px 0;

<label class="container">Black
  <input type="checkbox" class="black" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">White
  <input type="checkbox" class="white">
  <span class="checkmark"></span>
</label>

<label class="container">Yellow
  <input type="checkbox" class="yellow">
  <span class="checkmark"></span>
</label>

<label class="container">Red
  <input type="checkbox" class="red">
  <span class="checkmark"></span>
</label>

<label class="container">Green
  <input type="checkbox" class="green">
  <span class="checkmark"></span>
</label>

【参考方案3】：

您可以用另一个元素模仿复选框并根据需要设置背景颜色。

<span onclick="this.innerHTML = (this.innerHTML ? '' : 'X')"></span>
<style>
    span
        display:inline-block;
        width:10px; height:10px; 
        font:10px/10px 'Sans Serif'; color: green;
        border:solid 1px black;
        vertical-align:middle;
        cursor:pointer;
        
</style>

你可以通过使用 ::before 或 after 来变得更花哨

<span class='checked' onclick="this.classList.toggle('checked')"></span>
<style>
span
    display:inline-block;
    height: 10px; width:10px; 
    border:solid 1px black;
    vertical-align:middle;
    cursor:pointer;

span.checked::before
  content:'×';
  display:block; height: 10px; 
  font:10px/10px 'Sans Serif'; 
  color:green;

</style>

您可以通过在 ::after 标记中使用背景图片或 svg sprite 来扩展它（参见 https://***.com/a/19255455/87520）

我没有试图让它完美，只是为了展示这个概念。 如您所见，背景颜色为绿色，没有图像，没有涉及库；最小的js。

【参考方案4】：

如果您需要将刻度颜色从黑色更改为白色，只需尝试将filter: invert(1) 应用于复选框。

【讨论】：

简单而聪明。我使用灰度滤镜来获得更中性的解决方案。

【参考方案5】：

如果你使用b-form-checkbox，你会发现标记的css 就是svg 这样...

.custom-checkbox
.custom-control-input:checked
~ .custom-control-label::after 
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath **fill='%23000'** d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");

它是由svg绘制的，所以你可以改变坐标来修改标记或改变fill来改变标记颜色。

【参考方案6】：

这是一个纯 CSS 解决方案，它不会破坏屏幕阅读器或默认用户代理操作。此外，最新版本的四大浏览器支持此功能（如果您添加一些额外的黑客，还有其他一些浏览器，但我会让您自己弄清楚；可能不会获得超过 IE8+ 的支持，因为它使用伪元素）。

这个想法是隐藏实际的表单元素（因为浏览器会用内部样式进行硬替换，并且还没有将所有样式功能暴露给 css）并用我们喜欢的替换它。一个副作用是，如果需要，您将希望在 JS 中跟踪更改事件而不是单击事件（但您这样做对吗？）。

因为标签与表单元素绑定，点击它的工作方式与预期一样，所以新的、很棒的复选框 (::before) 滥用原始属性选择器 ([checked]) 来检查它是否是 @987654323 @。当它被选中时，它将显示我们更棒的复选标记 (::after)。

复选标记 (::after) 滥用边框宽度来表示厚度，滥用高度/宽度来制作类似项目的复选标记。最后，我们将盒子变换 45 度以正确匹配角度。

要更改复选标记的颜色，请更改::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，因为这是当我试图回忆过去我是如何做到这一点时出现的第一个问题。 ;)

【讨论】：

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

代码 sn-p 修订版没有添加任何价值（甚至没有工作）并删除了一些上下文，所以我已经恢复了它。如果您再次添加它，请确保它有效。如果可以的话，我会看看更新 jsfiddle 以再次工作。

【参考方案7】：

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

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

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

【讨论】：

两张图片，一张为选中状态，一张为未选中状态。 javascript 可以根据您在每次单击图像时设置的变量为您交换它们。