1

Is it possible to fill the checkbox with a background colour when checked? Also to disable the 'tick' itself.

How do I achieve this? Should I be looking at jQuery/Javascript for this?

Fiddle Demo: http://jsfiddle.net/119a7e8r/

li.squaredTwo li label {
  display:none
}

input[type=checkbox]:checked {
  background:red
}
<ul>

  <li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
  
  <label class='gfield_label'  >Is it free</label>
  
  <div class='ginput_container ginput_container_checkbox'>
    
    <ul class='gfield_checkbox' id='input_1_20'>
  
      <li class='gchoice_1_20_1'>
        <input name='input_20.1' type='checkbox'  value='Yes'  id='choice_1_20_1' tabindex='35'  />
        <label for='choice_1_20_1' id='label_1_20_1'>Yes</label>

      </li>
      
    </ul>
    
  </div>
  
  </li>

</ul>
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
  • 1
    You might want to take a look at this question: http://stackoverflow.com/questions/19145504/style-a-checkbox-in-firefox-remove-check-and-border – taylorc93 Dec 15 '15 at 17:19
  • Might be easiest to just embed an image (or craft one outta `div`s) and pick which one with `:checked+.cstm-chk` in the css, while hiding the checkbox itself and sending any onclick events to the checkbox. Doesn't need jQ unless your target browser(s) include ancient relics, and the js is simply the onclick property firing a `this.previousElementSibling.click();` – abluejelly Dec 15 '15 at 17:28

3 Answers3

2

Here's a nifty CSS-only solution for custom checkboxes:

/* hide the default checkbox */
.checkbox {
  display: none;
}

.label {
  cursor: pointer;
}
/* add pseudo-element as fake checkbox before the label */
.checkbox + .label:before {
  width: 10px;
  height: 10px;
  border: 2px solid gray;
  border-radius: 2px;
  box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
  background: red;
  position: relative;
  display: inline-block;
  margin-right: 1ex;
  content: "";
}

/* style the pseudo element for checked box */
.checkbox:checked + .label:before {
  background: green;
}
<input type="checkbox" class="checkbox" id="myinput" />
<label class="label" for="myinput">Click me</label>
casraf
  • 21,085
  • 9
  • 56
  • 91
0

My starting point for just pure CSS on this would be something like this:

HTML

<input type="checkbox">Hello</input>

CSS

input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: bottom;
}

input[type=checkbox]:after {
  content: "";
  border-bottom: 10px solid red;
  border-top: 10px solid red;
  display: block;
  opacity: 1;
}

input[type=checkbox]:checked:after {
  border-bottom: 10px solid blue;
  border-top: 10px solid blue;
}

Demo: http://codepen.io/newanalog/pen/LppBgv

Try playing around with the opacity and sizes.

-1

I think you should be looking at jQuery for this. here are some examples for other stackoverflow questions, with a working jsfiddle

hope this helps!
Community
  • 1
  • 1
FlipFloop
  • 1,233
  • 1
  • 14
  • 25