I Effing Hate Checkboxes and Radio Buttons

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

I Effing Hate Checkboxes and Radio Buttons

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: I Effing Hate Checkboxes and Radio Buttons

Post 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>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: I Effing Hate Checkboxes and Radio Buttons

Post 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.
User avatar
Syntac
Forum Contributor
Posts: 327
Joined: Sun Sep 14, 2008 7:59 pm

Re: I Effing Hate Checkboxes and Radio Buttons

Post by Syntac »

Thanks Pickle, I was actually having trouble with this too.
jack_indigo wrote:Duh!
Seconded... :|
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: I Effing Hate Checkboxes and Radio Buttons

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply