文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何更改周围白色的复选框背景色

问如何更改周围白色的复选框背景色
EN

Stack Overflow用户
提问于 2019-05-14 19:11:31
回答 3查看 118关注 0票数 0

我正在寻找一个解决方案，如何改变css背景颜色与填充或白色周围的复选框，我尝试和发挥周围使用边缘，填充高度等，但没有运气。所以当用户单击复选框时，它会显示背景颜色，它可以工作，但是我希望复选框周围有白色的填充，可以吗？

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<div class="checkbox">
							<input type="checkbox" class="input-assumpte" id="input-confidencial" />
							<label for="input-confidencial">Confidencial</label>
						</div>

​

css
css-selectors
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-05-14 19:29:56

你想要的正是背景剪辑，简单：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<div class="checkbox">
    <input type="checkbox" class="input-assumpte" id="input-confidencial" />
    <label for="input-confidencial">Confidencial</label>
</div>

​

也在JSFiddle上。

“背景剪辑CSS”属性设置元素的背景是否扩展到边框、填充框或内容框下面。

值得一提的是，还有一个使用outline的额外边框的解决方案，但它扩展了元素：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<div class="checkbox">
    <input type="checkbox" class="input-assumpte" id="input-confidencial" />
    <label for="input-confidencial">Confidencial</label>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2019-05-14 19:16:38

您可以使用CSS box-shadow属性：

​

代码语言：javascript
复制
.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
}
代码语言：javascript
复制
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Confidencial</label>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2019-05-14 19:19:16

嵌入阴影应该就足够了。

代码语言：javascript
复制
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;

演示

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Confidencial</label>
</div>

​

带有负偏移量的大纲也可以起作用：

代码语言：javascript
复制
  outline: solid white 2px;
  outline-offset: -5px;

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Confidencial</label>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56137079

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档