Css 自定义引导复选框

我在Angular应用程序中使用Bootstrap，所有其他样式都正常工作，但checkbox样式没有。它看起来就像一个普通的老复选框

请登录
用户名
密码
登记
记得我吗
登录

您必须将引导版本4与

自定义类一起使用才能获得此样式：



选中此自定义复选框
记得我吗
因为bootstrap3没有一个适合的样式，所以我发现它非常适合Bootstrap样式

复选框

。复选框标签：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.checkbox.cr{
位置：相对位置；
显示：内联块；
边框：1px实心#A9A9；
边界半径：.25em；
宽度：1.3em；
高度：1.3em；
浮动：左；
右边距：.5em；
}
.checkbox.cr.cr图标{
位置：绝对位置；
字体大小：.8em；
线高：0；
最高：50%；
左：15%；
}
.checkbox标签输入[type=“checkbox”]{
显示：无；
}
.checkbox标签输入[type=“checkbox”]+.cr>.cr图标{
不透明度：0；
}
.checkbox标签输入[type=“checkbox”]：选中+.cr>.cr图标{
不透明度：1；
}
.checkbox标签输入[type=“checkbox”]：禁用+.cr{
不透明度：.5；
}

选择一
默认情况下选中选项二
选项三被禁用
正如其他人所说，您所追求的样式实际上只是Mac OS checkbox样式，因此在其他设备上看起来会有根本不同

事实上，您链接的两个屏幕截图都显示了Chrome Mac OS上的复选框，灰色的显示为非100%缩放级别。

/*自定义检查*/
.海关支票{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认复选框*/
.customcheck输入{
位置：绝对位置；
不透明度：0；
光标：指针；
}
/*创建自定义复选框*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：5px；
}
/*在鼠标悬停时，添加灰色背景色*/
.customcheck:悬停输入~.checkmark{
背景色：#ccc；
}
/*选中复选框后，添加蓝色背景*/
.customcheck输入：选中~.checkmark{
背景色：#02cf32；
边界半径：5px；
}
/*创建复选标记/指示器（未选中时隐藏）*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示选中标记*/
.customcheck输入：选中~。选中标记：之后{
显示：块；
}
/*设置复选标记/指示器的样式*/
.customcheck.checkmark:after{
左：9px；
顶部：5px；
宽度：5px；
高度：10px；
边框：纯白；
边框宽度：0 3px 3px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}

自定义复选框

一个
两个
三
四
这里有一个示例，您可以使用Font Aowesome 5 free设置复选框和收音机的样式[


/*通用样式*/
.自定义复选框标签，.自定义收音机标签{
位置：相对位置；
光标：指针；
颜色：#666；
字体大小：30px；
}
.custom checkbox input[type=“checkbox”]，.custom radio input[type=“radio”]{
位置：绝对位置；
右：9000px；
}
/*自定义复选框样式*/
.自定义复选框输入[type=“checkbox”]+.标签文本：在{
内容：“\f0c8”；
字体系列：“字体真棒5专业版”；
说：没有；
字体风格：普通；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1；
-webkit字体平滑：抗锯齿；
宽度：1米；
显示：内联块；
右边距：5px；
}
.自定义复选框输入[type=“checkbox”]：选中+。标签文本：之前{
内容：“\f14a”；
颜色：#2980b9；
动画：效果250ms缓进；
}
.自定义复选框输入[type=“checkbox”]：禁用+.标签文本{
颜色：#aaa；
}
.自定义复选框输入[type=“checkbox”]：禁用+。标签文本：之前{
内容：“\f0c8”；
颜色：#ccc；
}
/*自定义复选框样式*/
.自定义收音机输入[type=“radio”]+.标签文本：在{
内容：“\f111”；
字体系列：“字体真棒5专业版”；
说：没有；
字体风格：普通；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1；
-webkit字体平滑：抗锯齿；
宽度：1米；
显示：内联块；
右边距：5px；
}
.自定义收音机输入[type=“radio”]：选中+。标签文本：在{
内容：“\f192”；
颜色：#8e44ad；
动画：效果250ms缓进；
}
.自定义收音机输入[type=“radio”]：禁用+.标签文本{
颜色：#aaa；
}
.custom radio input[type=“radio”]：禁用+。标签文本：之前{
内容：“\f111”；
颜色：#ccc；
}
@关键帧效果{
0% {
变换：比例（0）；
}
25% {
转换：比例（1.3）；
}
75% {
转换：比例（1.4）；
}
100% {
变换：比例（1）；
}
}

1.海关检查箱
选项01
选项02
选项03
选项04
2.海关无线电
选项01
选项02