设置复选框的颜色html,css – 如何更改bootstrap复选框的颜色？

我已经从这个

CodePen改编了.squaredThree类作为你的例子.如果你想看一个实例,我的答案底部有一个小提琴链接.

这是更新的CSS：

/* .squaredThree */

.squaredThree {

position: relative;

float:left;

}

.squaredThree label {

width: 20px;

height: 20px;

cursor: pointer;

position: absolute;

top: 0;

left: 0;

background: #D7B1D7;

border-radius: 4px;

box-shadow: inset 0px 1px 1px rgba(0,0.5),0px 1px 0px rgba(255,255,0.4);

}

.squaredThree label:after {

content: '';

width: 9px;

height: 5px;

position: absolute;

top: 4px;

left: 4px;

border: 3px solid #fcfff4;

border-top: none;

border-right: none;

background: transparent;

opacity: 0;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.squaredThree label:hover::after {

opacity: 0.3;

}

.squaredThree input[type=checkbox] {

visibility: hidden;

}

.squaredThree input[type=checkbox]:checked + label:after {

opacity: 1;

}

/* end .squaredThree */

我已经更新了HTML以包含另一个标签,因为原始标签用作伪复选框.这是您更新的HTML：

Other

请注意,附加标签存在于.squaredThree div之外.标签有一类.label文本,因为需要一些额外的样式规则来将文本稍微移动到复选框的右侧：

.label-text {

position: relative;

left: 10px;

}

最后,复选框中的检查大小不太正确,因此需要一个额外的规则来纠正：

*,::before,::after {

box-sizing: initial;

}

Fiddle Demo显示上述行动.