Change Checkbox background color when checked

Question

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.

Here's what i want to accomplish:

Unchecked Checkbox:

Checked Checkbox:

Here are the CSS and 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/

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

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

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

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

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