Fill checkbox on selection with CSS

Question

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>

You might want to take a look at this question: stackoverflow.com/questions/19145504/… — taylorc93
– taylorc93, Commented Dec 15, 2015 at 17:19
Might be easiest to just embed an image (or craft one outta divs) 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
– abluejelly, Commented Dec 15, 2015 at 17:28

casraf · Accepted Answer · 2023-03-22 22:10:17Z

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>

edited Mar 22, 2023 at 22:10

answered Dec 15, 2015 at 17:38

casraf

21.8k10 gold badges60 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelmcgurk Over a year ago

Perfection! With a bit of work, this works for me: jsfiddle.net/119a7e8r/2 Thank you!!!

user5029970 · Accepted Answer · 2015-12-15 17:52:02Z

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.

answered Dec 15, 2015 at 17:52

user5029970

Comments

Community · Accepted Answer · 2017-05-23 12:07:25Z

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Dec 15, 2015 at 17:20

FlipFloop

1,2741 gold badge14 silver badges26 bronze badges

1 Comment

michaelmcgurk Over a year ago

Sorry. I'm tying to set the background colour of the checkbox to red and remove the tick. Is this possible?

Collectives™ on Stack Overflow

Fill checkbox on selection with CSS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related