While hovering over a label, mouse pointer changes to hand

Question

When I am hovering over an HTML label the mouse pointer changes to a hand image which we generally get when clicking a link. How can I avoid that?

Answer 1

The reason why you might get a hand cursor in some browsers, is because one of the main purposes of a label element in most browsers is to provide a clickable description for a form input element. For example, this is a typical use of the <label> element:

<input type="checkbox" name="TermAgreement" id="TermAgreement" />
<label for="TermAgreement">I agree to these terms</label>

In most browsers, this will result in the text "I agree to these terms" being clickable. When you click on the text, it will toggle the checkbox with an ID of TermAgreement, just as if you had clicked on the check box itself.

(Note: The W3C specification for <label> in HTML 5 doesn't require this behavior, but it does say that the browser's implementation of <label> "should match the platform's label behavior". In practice, this usually means <label> elements are clickable.)

So essentially, the cursor behaves as though the <label> is a link because it is a link, of a sort. If you're using it differently, you might want to consider using a different HTML element instead.

Whether or not a particular user sees a hand cursor when mousing over a label will vary depending on their OS and browser. Chrome and Firefox aren't displaying this behavior for me on Windows XP, but other platforms might. Also, it's possible that you have a CSS file included which specifically calls for this behavior. There would be a rule in your CSS that looks something like this:

label {
    cursor: pointer;
}

If you want to override the element's default behavior, you can use cursor: default; in your CSS, as @rickyduck said. You can find information on the CSS cursor property here. Note that changing the cursor will not necessarily mean the element won't respond to being clicked.

If this doesn't solve your problem, please provide us with more information. Sample code, the URL of the page displaying the behavior, as well as which browser you're using would also be good to know.

Answer 2

<label style="cursor:default">Text<label>