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/

@jake converted to inline snippet – CupawnTae Sep 01 '15 at 11:29 — CupawnTae, Sep 01 '15 at 11:29
@Jake edited with the jsFiddle. – Lowtrux Sep 01 '15 at 11:36 — Lowtrux, Sep 01 '15 at 11:36

Jacob · Answer 1 · 2015-09-01T11:41:27.803

5

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>

edited Sep 01 '15 at 11:41

answered Sep 01 '15 at 11:35

Jacob

1,933
2
20
30

1

You could get rid of the :after completly. But since I dont know how the rest of the website is built I just left it for @Lowtrux to edit. – Anyhow, cleaned if up as suggested. – Jacob Sep 01 '15 at 11:40
1

True - I mentioned it mainly as the OP was trying to avoid using `padding`. – CupawnTae Sep 01 '15 at 11:43
Thanks a lot @Jake it worked perfect ! Just curious about the crossbrowser issues of this solution for stupid things like IE8, will do my research tho, thanks guys ! – Lowtrux Sep 01 '15 at 11:44
Great! Check out caniuse.com for more info of what you can actually use for different browsers! – Jacob Sep 01 '15 at 11:45
Hey @Jake im using connexo solution just because it fits with the kind of structure that i have on my site but your answer is also a perfect solution, thanks for the advice. – Lowtrux Sep 01 '15 at 11:58

score 4 · Accepted Answer · answered Sep 01 '15 at 11:42

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>

this a great solution @connexo, thanks a lot. I was trying to avoid the padding thing so your method came in handy. — Lowtrux, Sep 01 '15 at 11:57

Change Checkbox background color when checked

2 Answers2

Linked