Select Checkbox and maintain CSS styling

Question

Select Checkbox and maintain CSS styling

Navigation

#1 by (2 votes)

3

Dear, I have styled my checkbox, but I wish I could select more than one option, keeping the CSS style I created. Only because of my CSS rule, you are only selecting for the first item .

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox {
  display: none;
}

#checkbox+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox:checked+label:before {
  content: '\f046';
}

<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 1</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 2</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 3</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 4</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 5</label>
<br>

css css3

asked by anonymous 07.12.2017 / 13:13

1 answer

Length of jQuery does not update with append, how to solve? Conflict of reference Google.api

score 2 · Accepted Answer

In fact, your problem is that all id of your code is the same, you have to id per element. Take a look at the code below.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox1  {
  display: none;
}

#checkbox1+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox1:checked+label:before  {
  content: '\f046';
}
#checkbox2  {
  display: none;
}

#checkbox2+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox2:checked+label:before  {
  content: '\f046';
}
#checkbox3  {
  display: none;
}

#checkbox3+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox3:checked+label:before  {
  content: '\f046';
}
#checkbox4  {
  display: none;
}

#checkbox4+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox4:checked+label:before  {
  content: '\f046';
}
#checkbox5  {
  display: none;
}

#checkbox5+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox5:checked+label:before  {
  content: '\f046';
}

<input type="checkbox" id="checkbox1" name="">
<label for="checkbox1"> Item 1</label>
<br>
<input type="checkbox" id="checkbox2" name="">
<label for="checkbox2"> Item 2</label>
<br>
<input type="checkbox" id="checkbox3" name="">
<label for="checkbox3"> Item 3</label>
<br>
<input type="checkbox" id="checkbox4" name="">
<label for="checkbox4"> Item 4</label>
<br>
<input type="checkbox" id="checkbox5" name="">
<label for="checkbox5"> Item 5</label>
<br>