IE11 – Form Checkboxes won't check

[owlinargyle]

I’m not entirely sure this is a CSS issue, but my form is wrapped in CSS and you guys have helped me out before (you’re all so smart!), so I thought I’d run it by you. =)

I have three sets of Checkboxes. The first set, of one checkbox, has a label before it, the second two sets of checkboxes, have one label, but not before each of their checkboxes. The first checkbox works fine in IE11. The second two checkbox sets work fine in IE10 and below, but do not work in IE11.

I’ve been using SauceLabs to do browser compatibility testing, trying to find a solution. Would I really have to put labels before each of the checkboxes to make them work?

I’ve created a watered down version of the form in Codepen. If you have IE11, you can check it out here.

THANKS in advance!

[Paulie_D]

I wouldn’t have structured it like that, I would give each checkbox its own label and just used a span to something for the ‘group’ label but each to their own.

At the moment you just have bare text nodes in there and it might be hard to select an individual one if you wanted to. I’m a firm believer that bare text nodes are bad,

Regardless, Codepen works fine for me in IE11 / W7 (64bit).

[owlinargyle]

I have literally never seen a CSS-wrapped form with labels around each checkbox. That’s why I didn’t do it that way. =(

[Paulie_D]

…with labels around each checkbox.

Not labels around each checkbox (although you can) but a label for each checkbox.

HTML5Doctor
The label represents a caption in a user interface. The caption can be associated with a **specific** form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

Say you wanted to highlight the text / label for a specific day (for added visual reference if checked)…if you don’t have an individual label/span/whatever for it…you can’t do that.

Anyway, that’s a different discussion…is it working for you in IE11 now?

[shaneisme]

I wrap checks and radios around labels all the time. Makes it easy to style them. Also, as Paulie says, the labels are great for checkboxes and radios because clicking on the label text also activates the input! Great for touch UI in that way.

[Paulie_D]

I wrap checks and radios around labels all the time.

I think you meant that the other way round.

[shaneisme]

Hahah…

http://img.pandawhale.com/post-19430-Wonka-gif–Wait-a-minute-strik-Fe67.gif

[owlinargyle]

So the Label is defined in the CSS, but not wrapped around the HTML?

I’m sorry. Feeling a bit like a n00b. =( This is a new concept for me. I found some StackOverflows threads, but none with checkboxes. So I’m having a hard time conceptualizing.

Can you give me an example of how the CSS might look or point me to a resource?

[__]

Labels are HTML.

<label><input type=checkbox> Click here for Checkbox #1.</label>

<!-- if the input is not _inside_ the label, you MUST add a <code>for</code> attribute
     (you MAY add a <code>for</code> attribute anyway, if you wish). -->
<input type=checkbox id=box2>
<label for=box2> Click here for Checkbox #2.</label>

They can be selected in CSS, like any other element.

label{ color: red; }
label>input[type=checkbox]{ border: 1px dashed purple; }
label[for=box2]{ background: gold; }

As you can see, to be easily selected, you’ll probably want to add an id or for attribute.

owlinargyle

lol, looks like everyone’s doing it.

[shaneisme]

Thanks for stepping in Traq… Basically ignore everything I said in this thread and read Traq’s post instead.

[__]

Basically ignore everything I said in this thread and read Traq’s post instead.

??? You things useful said plenty!

[owlinargyle]

@un-traq-ed Of course, Labels are HTML. I guess I didn’t word that well. I had meant the CSS portion selector was what I needed an example of, which you provided. So, thank you. =)

And yeah, I changed my forum username a few months ago.

[Author]

Posts