Making custom checkboxes work with css - select or check not working

Question

I'm not able to select a checkbox and see a check in it. Somehow the css is not connected to the HTML. One of the issues is that the HTML is generated by a Django custom render function, so I'm keeping changes minimal. Here is the HTML:

<li class="option table"><div class="option-checkbox"><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div></li>

Here is the CSS which renders the checkbox:

.option .option-checkbox input[type="checkbox"]{display:none}
.option.selected{color:#10a6b8}
.option.selected .check{margin:3px 1px;background:url(check.png) no-repeat;width:16px;height:13px;overflow:hidden}

.option:hover{border:1px solid #0e91a1}
.option:active,.option.selected:active, .option.active{background-color:#0e91a1;color:#fff}

 .option-checkbox {
    background-color: #FFFFFF;
    border: 2px solid #E2E2E2;
    height: 20px;
    margin: 20px;
    width: 20px;
}

I simply cannot see what the issue is. Thanks.

Is there a way without js/jquery. My HTML is rendered from a database so I want this to be as clean as possible and having js/jquery means its going to be messy.

I don't think you're providing enough HTML with your CSS. I see no elements with an option class. — Bill Criswell
– Bill Criswell, Commented Dec 7, 2013 at 21:07
Where is your clickhandler that adds the .selected class to your <li> ? — SQRCAT
– SQRCAT, Commented Dec 7, 2013 at 21:13
Also, where is the element that the .check class applies to? — SQRCAT
– SQRCAT, Commented Dec 7, 2013 at 21:15
@SquareCat Do I need a click handler? I thought HTML + css was enough — disruptive
– disruptive, Commented Dec 8, 2013 at 10:20

Bill Criswell · Accepted Answer · 2013-12-07 21:40:57Z

1

I simplified this quite a bit I think. The trick to styling "checkboxes" is to style the label and to use the + selector so we can tell when the checkbox is checked. Here's a really simple approach.

/* Let's make our checkbox a simple green box! */
label:before {
  content: '';
  background-color: green;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
}

/* When the input **before** the label is checked, let's adjust it's styling. */
input:checked + label:before {
  background-color: red;
}

Here's my demo HTML

<div class="field">
  <input type="checkbox" name="foo[]" id="foo-003" value="foo-003">
  <label for="foo-003">Foo 003</label>
</div>

Here's a demo for you: http://jsbin.com/UvuNaWo/3/edit?html,css,output

It should help get things a bit clearer.

answered Dec 7, 2013 at 21:40

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

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

7 Comments

disruptive Over a year ago

On chrome, I get the colored checkbox and the standard one.

disruptive Over a year ago

Still cannot get rid of the standard checkbox to display just a single checkbox

disruptive Over a year ago

Thanks - I'm having a play - trouble is - inherited a very complex style sheet. Ideally all inputs should be on the right of the label - how can we do this?

disruptive Over a year ago

Thanks - I'm having a play - trouble is - inherited a very complex style sheet. Ideally all inputs should be on the right of the label - how can we do this?

disruptive Over a year ago

Thanks - What should be switched to :right? I would like the label first or left of the checkbox.

|

SQRCAT · Accepted Answer · 2013-12-07 21:37:23Z

0

Under the assumption that your complete code looks like this:

<li class="option table">
    <div class="option-checkbox"><div class="check"></div><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div>
</li>

i can generally demonstrate your desired outcome by adding this:

// In plain javascript
onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')"

// or using jQuery
onclick="$('#id_MyJobChoices_0').click();$(this).toggleClass('selected')"

to:

<li class="option table">

resulting in:

// In plain javascript
<li onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')" class="option table">

// or using jQuery
<li onclick="$(this).toggleClass('selected')" class="option table">

See this fiddle for a demonstration

Please note

I used a placeholder image, instead of your check.png file.

Hints

In order to check if the checkbox is currently marked, you can use this:

// In plain javascript
document.getElementById('id_MyJobChoices_0').checked

// or using jQuery
$('#id_MyJobChoices_0').is(':checked')

I demonstrated this in the fiddle, too.

Please keep in mind that this solution is just a demonstration - there is still much room for improvement.

edited Dec 7, 2013 at 21:37

answered Dec 7, 2013 at 21:18

SQRCAT

5,8509 gold badges48 silver badges79 bronze badges

2 Comments

disruptive Over a year ago

Is there a way without js/jquery. My HTML is rendered from a database so I want this to be as clean as possible and having js/jquery means its going to be messy.

SQRCAT Over a year ago

Not my solution. It requires javascript. Bill's solution seems to work without.

Collectives™ on Stack Overflow

Making custom checkboxes work with css - select or check not working

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related