更改复选框背景色

debugcn 发表于 Dev

佩德罗·斯蒂夫斯

下午好。

我在更改所选复选框的背景色时遇到问题。

我已经看到了Internet上的选项以及堆栈中的一些问题。但是他们都没有成功。下面是插入元素的DOM图像。

我测试的最后一个代码是这个，它仍然没有用

input[type=checkbox]:checked:after{
    background-color: red !important;
    color: blue !important;
}

旨在使背景颜色为＃FFEA00，选中时箭头为＃000。

最好的问候，并感谢您的帮助

阿维亚

选中时为黄色背景，选中时为黑色箭头。它在这里：

.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 2px solid #000;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #FFEA00;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid #000;
}

.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}

<div class="checkbox-container">
        <label class="checkbox-label">
            <input type="checkbox">
            <span class="checkbox-custom"></span>
        </label>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。