Page 1 of 1

I Effing Hate Checkboxes and Radio Buttons

Posted: Wed Nov 05, 2008 12:04 am
by jack_indigo
My rant for the day:

I effing hate checkboxes and radio buttons in HTML and XHTML. I mean, who the heck thought of making the label a separate thing and not to the right of it as a feature of the INPUT tag? Every time I try to draw a label next to it, the checkbox or radio button goes up or down or the label goes on a new line. It's freaking stupid. And then there's the cross browser CSS issue where I have to move one of those items up or down a couple pixels with relative positioning in order to make it line up consistently with the characters in the label on all browsers.

Re: I Effing Hate Checkboxes and Radio Buttons

Posted: Wed Nov 05, 2008 10:22 am
by pickle
What if I want my label to the left of the checkbox? What if I want to style it differently than the checkbox itself? There are lots of good reasons to have the label & checkbox be different elements.

As for your alignment issue - I feel you. Something like this might work:

Code: Select all

 
label input,label span{
  vertical-align:middle;
}

Code: Select all

<label>
  <input type = "checkbox">
  <span>
    Click this
  </span>
</label>

Re: I Effing Hate Checkboxes and Radio Buttons

Posted: Wed Nov 05, 2008 2:41 pm
by jack_indigo
You know what? I never ever thought to put the INPUT tag inside the LABEL tag. Duh!

Oh, and I think you'll want to change .label to LABEL in your CSS. But I get it.

Re: I Effing Hate Checkboxes and Radio Buttons

Posted: Wed Nov 05, 2008 2:45 pm
by Syntac
Thanks Pickle, I was actually having trouble with this too.
jack_indigo wrote:Duh!
Seconded... :|

Re: I Effing Hate Checkboxes and Radio Buttons

Posted: Wed Nov 05, 2008 3:12 pm
by pickle
jack_indigo wrote:I think you'll want to change .label to LABEL in your CSS. But I get it.
Fixed.

I'm still not sure if I'm 100% happy with putting the <input> inside the <label> it makes things work real nice like, but I don't know if it makes semantic sense.

& just to make sure everyone knows, if you give the <input> an "id" attribute, you can give the <label> a "for" attribute of the same value, and the <input> will be checked when someone clicks on the label. I'm not sure how wide-spread that knowledge is.