0

Hello, I used checkboxes using font awesome icons. I looks great but I still need to be able to change the background of the box (like that it only changes the icon and the text.

I know I have to add it in this line with the label backround but I don't know how:

.checkboxes input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before {
  color: #2581BC;
}

Here there is the code and CSS.

Thanks.

<div class="row checkboxes">
     <div class="col-lg-8">
       <label for="check-one">
           <input type="checkbox" name="check-one" id="check-one" value="checkone"/>
           <i></i> <span>Checkbox 1</span> 
     </label>
             
      <label for="check-two">
         <input type="checkbox" name="check-two" id="check-two" value="check-two"/>
          <i></i> <span>Checkbox 2</span>
     </label>   
      </div>
  </div>
CSS:


::-moz-selection {
 background: white;
}

::selection { background: white; }



.checkboxes label {
  display: block;
  position: relative;
  padding: 6px 2px 10px 20px;
  line-height: 28px;
  font-weight: normal;
  cursor: pointer;
   border: 1px solid #e6e7e8;
  border-radius:4px;
  background:#f6f6f6;
  margin-top:16px;
  -webkit-tap-highlight-color: transparent;
}



.checkboxes label i {
  display: inline-block;
  height: 28px;
  position: relative;
  top: 6px;
  font-style: normal;
  color: #ccc;

}

.checkboxes label span {
  color: #2c3e50;
  display: unset;
  font-size: 16px;
  line-height: 25px;
  margin-left: 14px;
  min-width: 256px;
}
.checkboxes input[type="radio"],input[type="checkbox"] { display: none; }

.checkboxes input[type="radio"] + i:before, input[type="checkbox"] + i:before {
  font-family: 'FontAwesome';
  font-size: 24px;
  height: 25px;
  width: 25px;
  display: table;
}

.checkboxes input[type="radio"]:checked + i, input[type="checkbox"]:checked + i {
  position: relative;
  -webkit-animation: icon-beat 0.1s ease;
  animation: icon-beat 0.1s ease;
}

.checkboxes input[type="radio"]:checked + i + span, input[type="checkbox"]:checked + i + span {
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.checkboxes input[type="radio"] + i:before { content: "\f10c"; }

.checkboxes input[type="radio"]:checked + i:before { content: "\f111"; }

.checkboxes input[type="radio"]:checked + i + span + label,input[type="radio"]:checked + i + label:before { color: rgba(245,245, 245); }

.checkboxes input[type="checkbox"] + i:before { content: "\f10c"; }

.checkboxes input[type="checkbox"]:checked + i:before { content: "\f05d"; }

.checkboxes input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before { color: #2581BC; }
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Neus Pla Juárez
  • 3
  • 2
  • what box? where are the font awsome icons? labels shouldn't have child elements – atmd Mar 20 '15 at 16:31
  • @atmd Nothing wrong with `label`s having children...it's quite common. – Paulie_D Mar 20 '15 at 16:39
  • Sorry, was under the impression input was a block level element making the mark up invalid (but i guess that depends on doctype and whether validation matters anyway) – atmd Mar 20 '15 at 16:42
  • Nope...`inputs` are inline elements - https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente – Paulie_D Mar 20 '15 at 16:47
  • OP...are you trying to change the label background if the checkbox is checked? If so..[**that's not possible with CSS**](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Paulie_D Mar 20 '15 at 16:49

2 Answers2

0

Unfortunately you can't style check boxes like that.

your options would be to recreate a check box using div's etc and give them a check box like appearance.

Another option is to use a background image/svg

here are a few plugins to do it for you if you don't fancy rolling your own solution

atmd
  • 7,430
  • 2
  • 33
  • 64
0

With some jquery code, you could achieve it this way:

$('input[type="checkbox"]').click(function(){
    var label = $('label[for='+this.id+']');
    if($(this).is(":checked"))
        label.addClass("labelselected");
    else
        label.removeClass("labelselected"); 
});

JsFiddle demo : http://jsfiddle.net/dhtfyq25/1/

Otherwise, with only CSS and not changing html is not possible, as there is no way that you can select the parent (label) according to its children value (input:checked)

If you tweak a little the html, then you could use sibling selectors and achieve background changing with only CSS :) To do so, you would need to move your input elements above your lablels, e.g.:

   <input type="checkbox" name="check-one" id="check-one" value="checkone"/>
   <label for="check-one">
       <i></i> <span>Checkbox 1</span> 
    </label>
     <input type="checkbox" name="check-two" id="check-two" value="check-two"/>
     <label for="check-two">
         <i></i> <span>Checkbox 2</span>
    </label>

And then, add this CSS :

input[type="checkbox"]:checked + label { background: red !important; }

JsFiddle demo: http://jsfiddle.net/4pxfjvdv/1/

lpg
  • 4,897
  • 1
  • 16
  • 16