作者：sunhuan | 来源：互联网 | 2023-02-01 19:45
当我更改复选框的背景时,检查图标的大小也会因某种原因调整大小.我怎么能阻止这种情况发生？
看看我的代码,看看我的意思:
.custom-checkbox .custom-control-indicator {
border-radius: 50%;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #2c2b2c;
}
.custom-control-description {
color: #2c2b2c;
text-transform: uppercase;
line-height: 2.7;
font-size: 12px;
}
/* When I remove background the icon goes back to that default size */
.custom-control-input:checked~.custom-control-indicator {
background: red;
}
1> Sebastian Br..：
使用简写属性background覆盖所有background-*属性,由Bootstrap 4设置.我认为您只想更改background-color属性,因此您可以使用以下解决方案:
解决方案使用Bootstrap 4(alpha) - 原始答案:
.custom-checkbox .custom-control-indicator {
background-color: #fff;
border: 1px solid #2c2b2c;
border-radius: 50%;
height: 25px;
width: 25px;
}
.custom-control-description {
color: #2c2b2c;
font-size: 12px;
line-height: 2.7;
text-transform: uppercase;
}
/* When I remove background the icon goes back to that default size */
.custom-control-input:checked ~ .custom-control-indicator {
background-color: red !important;
}
京公网安备 11010802041100号