修改单选框、复选框样式
2024-07-17 23:47 更新
为了获取更多最新内容及功能更新,请直接访问我们的首页以查看DzzOffice笔记的最新地址。
文件:static\css\checkbox.css
删除下面的代码
.checkbox-custom input[type=radio]:focus+label::before, .checkbox-custom input[type=checkbox]:focus+label::before {
outline: thin dotted;
outline: 0.36em auto -webkit-focus-ring-color;
outline-offset: -2px;
}
文件:static\bootstrap\css\bootstrap.min.css
1.文件末尾添加以下代码
input[type=checkbox] {
border-radius: .25em;
width: 1em;
height: 1em;
vertical-align: top;
margin-top: .25em;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid rgba(0, 0, 0, .25);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact
}
input[type=radio] {
border-radius: 50%;
width: 1em;
height: 1em;
vertical-align: top;
margin-top: .25em;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid rgba(0, 0, 0, .25);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact
}
input:active {
filter: brightness(90%)
}
input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)
}
input:checked {
background-color: #0d6efd;
border-color: #0d6efd
}
input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}
input:checked[type=radio] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
}
input[type=checkbox]:indeterminate {
background-color: #0d6efd;
border-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}
input:disabled {
pointer-events: none;
filter: none;
opacity: .5
}
input:disabled,input[disabled] {
opacity: .5
}
2.删除以下代码即可
input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
以上内容是否对您有帮助:
更多建议: