Simon Willison’s Weblog

Mozilla and IE already change the cursor from the text cursor to the normal cursor for <label> elements. Changing it to yet another cursor, especially one with a specific meaning ("this is a hyperlink"), seems kinda weird.

Jesse Ruderman - 16th June 2003 06:19 - #

I was wondering that same thing. I guess the benefit is that the switch is much more noticable because the default cursor for label elements doesn't really stand out, unless you notice that it doesn't change to the text cursor. The pointer might be appropiate when you consider that it's something you can click as well.

Matt - 16th June 2003 07:44 - #

I like it. And I'm not so sure that the pointer means "this is a hyperlink;" for example, many browsers use the pointer cursor over any <input type="image"> element. As a result, I tend to think of the pointer as indicating "this is something to click on." Maybe that's just me, though.

James - 16th June 2003 08:29 - #

Good idea, although it wont work in IE5. Reason: IE5 doesnt know "pointer", all he knows is "hand"

To make it work on IE5 as well, use this:

label {cursor: pointer; cursor: hand;}

Long live IE & web standards :/

(btw, this might break css's validation, read: this )

Lyon - 16th June 2003 09:05 - #

I have been using this on my site for awhile myself. It does have issues with Netscape 6.0-7.01 though, since their support for label is broken. So oftentimes the label will actually do nothing when clicked, and the cursor change just misleads the user.

Bill Mason - 16th June 2003 09:13 - #

I agree that this effect cna be slightly odd on labels which are linked to text fields, but it really comes in to its own when dealing with labels for checkboxes and radio buttons (which are the elements that most benefit from labels in the first place). I suppose it could be limited to just those labels using a hard-coded class, or maybe a bit of DOM driven Javascript that dynamically applies the class to labels linked to those kinds of input element.

I know there are a few problems with label support in certain older versions of the Netscape 6/7 series (the float label bug is particularly nasty) but as far as I'm concerned the benefits of using it far outweigh the negatives.

Simon Willison - 16th June 2003 09:40 - #

I just recently discovered <label> myself and I agree it's a great tag. I just wonder how much it will be a part of the W3 specs. The cursor CSS element is particularly useful if you are one of the folks that like to use javascript links. :) Aaron

Aaron Brazell - 16th June 2003 14:16 - #

I use styled labels a long time ago. I think, each changing of focus should be clearly indicated. I use also:

label:focus { background: #fff /* whatever get's attention */ }

Thomas

Thomas Scholz - 16th June 2003 21:36 - #

If you create a label element with the DOM Internet explorer doesn't support it functionality anymore, which is bad, real bad.

Anne van Kesteren - 17th June 2003 16:52 - #

@Thomas: nice thing, but somehow it doesn't work here: http://paland.tv/programmierung/kontakt.htm (IE6, Firebird, Mozilla 1.3). Any Ideas?

Beate - 18th June 2003 00:35 - #

I was wondering that same thing. I guess the benefit is that the switch is much more noticable because the default cursor for label elements doesn't really stand out, unless you notice that it doesn't change to the text cursor. The pointer might be appropiate when you consider that it's something you can click as well.

Michel - 19th December 2003 21:01 - #