我正在寻找一个解决方案,如何在复选框周围使用填充物或白色更改CSS背景颜色,我尝试使用保证金,填充高度等,但没有运气。因此,当用户单击复选框时,它将显示背景颜色,它正在工作,但是我想在复选框周围有白色填充,是否可能?
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label:after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
正是您想要的是背景折叠,简单:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #0e4caa;
background-clip: content-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
也在Jsfiddle上。
背景CLIP CSS属性设置了元素的背景是否 延伸在其边框盒,填充盒或内容框的下方。
仅提到,还有一个使用outline
的额外边框还有一个解决方案,但它扩展了元素:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #fafafa;
outline: 4px solid #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
您可以使用CSS box-shadow
属性:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
padding: 5px;
box-shadow: inset 0px 0px 0px 4px white
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
插图的阴影应该足以满足此
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa ,inset 0 0 0 4px white;
演示
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa, inset 0 0 0 4px white;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
概述带有负偏移的概述也可能起作用:
outline: solid white 2px;
outline-offset: -5px;
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
outline: solid white 2px;
outline-offset: -5px;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>