Question

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

Answer 1

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

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

因为标签与表单元素相关联，所以单击它会像预期的那样工作，因此新的，很棒的复选框（::before）会滥用原始文件上的属性选择器（[checked]）来检查是否它是checked。选中后，它将显示我们的精选复选标记（::after）。

复选标记（::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

您可以使用其他元素模仿复选框，并根据需要设置背景颜色。

http://jsfiddle.net/ApHME/

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

WAIT !!!
MVC纯粹主义者和其他狂热分子 - 你可以轻松地将js移动到它自己的小方法中，但我正在尝试展示简洁 - 漂亮请不要为此向我投票叹息。

Answer 4

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

Answer 5

勾选这个它会告诉你如何设置复选框的样式 How to create a custom checkbox 不用 JS 也可以

const app = () => {
  const profile = useContext(ProfileContext);
  console.log(typeof profile) // object type
  
  const gotoEditPage = () => {
   history.push({
     pathname: '/setting',
     state: {profile}
   })
  }
 return (
  <>
   <button onClick={gotoEditPage}>Next</button>
  </>
 )
}

/* 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;
}

Answer 6

如果您使用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来更改标记颜色。

Answer 7

你可以这样做。

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

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

7 个答案: