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

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: '\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>

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/Lter04p8/

2 个解决方案

#1

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

这里不需要填充。只使用显示:inline-block;上:后，应用宽度和高度，也应用一个平滑过渡。也不需要额外的

。

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

#2

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

添加正确的背景颜色和宽度:100%;高度:100%;然后添加overflow:隐藏到父节点(.input-假设- pte)，并删除复选框标记。

Notice that content: ""; is still in place, without it :after or :before will not display.

请注意,内容:“”;仍然存在，没有它:after or: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>

#1