cursor pointer for labels

[webvitalii]

It would be good to have cursor:pointer style for labels by default.

Here is the example of the form with label to test -
http://twitter.github.com/bootstrap/examples/signin.html

There are already such styles:
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}

It would be good also to have such styles by default:
label[for], select, .pointer {
cursor: pointer;
}

[lkesteloot]

Wait, why do we want a pointer for a label? Clicking it doesn't take you anywhere. At best it only focuses the field, which isn't what a pointer cursor is supposed to mean. And the example above has label[for], which at least restricts it to labels that do something, but the latest Bootstrap 2.2.2 just has "label", meaning that any label has a pointer cursor. The user will expect that clicking on it will do something (specifically, that it will take them somewhere), and it won't.

[ghost]

Confused me as well. Should definitely go away at least for the basic text input.

[dbough]

Confused here to. I can't think of a global reason labels would need to show a pointer on hover.

[elihoreph]

I agree, this change does not make sense. Labels should not have cursor: pointer. Perhaps the OP's selector makes sense: "label[for]" could probably default to have pointer, but not just any label...

[mauricelam]

I think not all clickable elements should have cursor:pointer, plus the effect you get by clicking on a label is barely visible. This confused me and I think will confuse users.

[FagnerMartinsBrack]

There is a wrong concept around pointers, it should be used only when a button hasn't enough affordance. If you are developing an app the pointer should only appear for textual links and not for buttons or other controls.

Unfortunately this culture of pointer for buttons have grown in the web, so we have almost no choice but to use it (although Google does not use it very often). The same does not apply for regular desktop applications.

Clickable labels have no affordance at all, so it makes sense for the pointer.
One could argue that labels should only have pointer if they act as field container or have the for property, but it seems @mdo is relying to the fact that no one should use labels without reference to an input (or it should not be considered a label at all).

I am in favor of this move, never used label without the proper control reference (and I can't see any benefit doing so...).

[mauricelam]

I agree that labels should only be used with for property. That's what the tag is designed for after all.

But an affordance only has value when it allows the user to discover something meaning. Here the user loses nothing by not knowing that it is clickable.

The fact that this is not common on the web, and browsers don't implement this by default means that a lot of users will be surprised by the pointer, perhaps expecting some kind of interaction to happen, or a tooltip to show up. Some users may even avoid clicking on it to avoid being brought to another page.

[wufeng87]

The checkbox will be highlighted on hover, that is enough for the most common case I think.

[lkesteloot]

Okay so I think we're all in agreement. Not sure how we fix this. A pull request?

[mdo]

Go ahead and open a pull request against 3.0.0-wip if you like. Here's what I'd like to do given the discussion here:

• Don't set any cursor on <label>s by default
• On .checkbox, .radio, .checkbox-inline, and .radio-inline, set cursor: pointer; on the <label> within them.

I say set the cursor there because they are in fact directly clickable and given the new structure of those form controls (divs around labels around inputs), it makes a lot of sense to encourage the larger clickable area without hitting the inadvertent clicks we have today in 2.x.

Make sense?

[lkesteloot]

I no longer see in the code where this is set in 3.0.0. I suppose this was fixed in all the rework of labels.

[mdo]

Oh snap, forgot I had removed them. Well, just did the second part to finish this out. Should be all set for v3 now.

Thanks nerds! <3

[itimgit]

We want a cursor when hovering a label used on a custom-file-input, because clicking it opens Choose file dialog.