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

Change Checkbox background color when checked

提问by Lowtrux

Im changing the look and feel of all my checkboxes using css3, but i'm trying to find a better way to implement the checked properties (when checked the checkbox have to be filled just with a solid color) and i really don't know if using padding in order to acomplish this is the best practice since im getting different results when using different browsers. Some advide will be really appreciated.

我正在使用 css3 更改所有复选框的外观和感觉，但我正在尝试找到一种更好的方法来实现选中的属性（选中时，复选框必须只填充纯色），我真的不知道如果使用填充来完成这是最佳实践，因为在使用不同的浏览器时我会得到不同的结果。一些建议将不胜感激。

Here's what i want to accomplish:

这是我想要完成的：

Unchecked Checkbox:

未选中的复选框：

Checked Checkbox:

勾选复选框：

Here are the CSS and HTML:

以下是 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: '14';
  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>

Notice that i have to include a character in the checkbox checked status in order to being able to add a padding to fill the whole checkbox with a background color, as i said before im really trying to find a better way to do that.

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

Here's the JSFiddel: http://jsfiddle.net/Lter04p8/

这是 JSFiddel：http: //jsfiddle.net/Lter​​04p8/

采纳答案by connexo

No need for padding here. Just use display: inline-block;on :after, apply widthand height, and also apply a smooth transition. Also you don't need that extra <div>.

这里不需要填充。只需使用display: inline-block;on :after、 applywidth和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>

回答by Jacob

Add the correct background-colorand width: 100%; height: 100%;Then add overflow: hidden to the parent ( .input-assumpte) and remove the checkbox marker.

添加正确的background-color和width: 100%; height: 100%;然后添加溢出：隐藏到父（.input-assumpte）和删除复选框标记。

Notice that content: "";is still in place, without it :afteror :beforewill not display.

请注意，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>