CODEWITHSUNDEEP
javascripthtmlcss
disruptive
disruptive

Reputation: 5946

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

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.

Upvotes: 0

Views: 179

Answers (2)

Bill Criswell
Bill Criswell

Reputation: 32921

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.

Upvotes: 1

SQRCAT
SQRCAT

Reputation: 5840

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.

Upvotes: 0

Related Questions