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

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>

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

这是JSFiddel： http://jsfiddle.net/Lter04p8/

Answer 1

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里不需要填充。只需在display: inline-block;上使用:after，应用width和height，并应用平滑过渡。此外，您不需要额外的<div>。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;