如何更改引导复选框的颜色？
用户名
我有以下html代码：
<div class="container">
<form name="queryForm" class="form-inline text-center">
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p>
</form>
</div>
结果是：
将颜色更改为给定颜色（例如D7B1D7）的最简单方法是什么？
亚斯
我已.squaredThree将此CodePen中的类改编为您的示例。如果您想看现场示例，我的答案底部有一个Fiddle链接。
这是更新的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, 0, 0.5), 0px 1px 0px rgba(255, 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 label，因为原始HTMLlabel被用作伪复选框。这是您更新的HTML：
<div class="container">
<form name="queryForm" class="form-inline">
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
<label for="checkOther"></label>
</div>
<label class="label-text">Other</label>
</form>
</div>
请注意，其他内容label在之外.squaredThree div。该label有一个类的.label-text一些附加的样式规则的文字稍微移动到右面需要checkbox：
.label-text {
position: relative;
left: 10px;
}
最后，支票中的支票的大小checkbox不太正确，因此需要一条附加规则来纠正：
*,
::before,
::after {
box-sizing: initial;
}
小提琴演示，上面显示了上述操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何更改引导复选框的样式
- 2
如何更改复选框的选中颜色？
- 3
如何更改WPF复选框的颜色？
- 4
如何更改实际复选框内 J 复选框的背景颜色
- 5
选中复选框时更改复选框颜色？
- 6
选中复选框时更改复选框颜色？
- 7
如何在Android中更改复选框刻度颜色
- 8
选中复选框后，如何更改DIV的颜色？
- 9
如何以编程方式更改复选框颜色
- 10
Bootstrap 4：如何更改复选框的颜色？简单的方法
- 11
激活后如何从复选框更改DataGridHeader的颜色？
- 12
选中复选框后，如何更改DIV的颜色？
- 13
如何将复选框颜色更改为黑色
- 14
如何在Javascript中更改复选框的边框颜色
- 15
如何更改按钮的颜色单击复选框时
- 16
如何使用白色更改复选框背景颜色
- 17
更改Vuetify复选框标签的颜色？
- 18
Flutter：更改复选框的选中颜色
- 19
更改 UIkit 复选框的背景颜色
- 20
如何居中引导复选框形式
- 21
如何居中引导复选框形式
- 22
更改复选框上的芯片颜色更改实现 css
- 23
如何更改复选框按钮的外观？
- 24
如何更改Android复选框样式
- 25
如何使复选框更改值？
- 26
选中复选框时更改复选框标签的颜色
- 27
选中复选框时更改复选框标签的颜色
- 28
使用复选框更改背景颜色，可以选择数量有限的复选框
- 29
更改复选框的复选框背景颜色选中并取消选中
我来说两句