选中复选框时更改背景颜色

Question

我正在使用CSS3更改所有复选框的外观，但我正在尝试找到更好的实现选中属性的方法（选中时，复选框必须仅填充一个纯色），我真的不知道是否使用填充来完成这一点是最佳实践，因为在使用不同的浏览器时会得到不同的结果。非常感谢任何建议。

这是我想要实现的效果:

未选中的复选框:

已选中的复选框:

以下是CSS和HTML:

.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 {
  -webkit-appearance: none;
  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);
  padding: 9px;
  display: inline-block;
  position: relative;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
  color: #595959;
  content: '\2714';
  font-size: 10px;
  left: 0px;
  padding: 2px 8px 2px 2px;
  position: absolute;
  top: 0px;
}

<div class="checkbox">
  <div class="tag">Confidencial</div>
  <input type="checkbox" class="input-assumpte" id="input-confidencial">
  <label for="input-confidencial"></label>
</div>

请注意，我必须在复选框的选中状态中包含一个字符，以便能够添加填充以填满整个复选框的背景色，正如我之前所说，我真的在努力寻找更好的方法来做到这一点。

以下是JSFiddle链接： http://jsfiddle.net/Lter04p8/

- Lowtrux

---

你能提供一个 jsFiddle 吗？ - Jacob

@jake 转换为内联代码片段 - CupawnTae

@Jake 用 jsFiddle 进行了编辑。 - Lowtrux

Answer 1

添加正确的background-color和width: 100%; height: 100%;然后将overflow: hidden添加到父元素(.input-assumpte)并删除复选框标记。

请注意，content: "";仍在原位，没有它，:after或:before将无法显示。

.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 {
  -webkit-appearance: none;
  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);
  padding: 9px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.input-assumpte:checked + label:after {
  width: 100%;
  height: 100%;
  content: "";
  background-color: #008FD5;
  left: 0px;
  position: absolute;
  top: 0px;
}

<div class="checkbox">
  <div class="tag">Confidencial</div>
  <input type="checkbox" class="input-assumpte" id="input-confidencial">
  <label for="input-confidencial"></label>
</div>

- Jacob

---

你可以完全摆脱 :after。但由于我不知道网站的其余部分是如何构建的，所以我只是留给 @Lowtrux 进行编辑。总之，按照建议进行了清理。 - Jacob

True - 我主要提到这一点是因为原帖作者试图避免使用“padding”。 - CupawnTae

非常感谢@Jake，它完美地解决了问题！只是对于像IE8这样的跨浏览器问题有些好奇，不过我会进行研究的，谢谢大家！ - Lowtrux

太好了！请查看 caniuse.com 以获取有关不同浏览器实际可用内容的更多信息！ - Jacob

嘿@Jake，我正在使用Connexo解决方案，因为它与我网站上的结构相符，但你的答案也是一个完美的解决方案，感谢你的建议。 - Lowtrux

Answer 2

无需在此处添加填充。只需在 :after 上使用 display: inline-block;，应用 width 和 height，并且还要应用平滑的过渡。同时不需要额外的 <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: 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;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}

<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Confidencial</label>
</div>

- connexo

---

这是一个很棒的解决方案@connexo，非常感谢。我一直在尝试避免填充的问题，所以你的方法非常有用。 - Lowtrux