我正在寻找一个解决方案,如何改变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>
发布于 2019-05-14 19:29:56
你想要的正是背景剪辑,简单:
.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上。
“背景剪辑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>
发布于 2019-05-14 19:16:38
您可以使用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>
发布于 2019-05-14 19:19:16
嵌入阴影应该就足够了。
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>
https://stackoverflow.com/questions/56137079
复制相似问题