Why different pointer on and /

Question

All browsers show different cursor for <div>, <span> than <label>. I checked in Chrome, Firefox, IE.

<span>SPAN</span>
<div>DIV</div>
<label>LABEL</label>

Why it is so?? I went through MDN and questions of SO. but didn't find answer.

Please note: I am not looking for solution (cursor: auto) but reason

This happens because the span tag is inline equivalent to the div tag while the label tag is a very unique tag and it is more used on forms and that stuff, i believe that is the reason the cursor is different between "span & div" and "label" — Hugo André, May 29 '20 at 11:04
@Vaibhav Labels may have the attribute "for" where you can specify an id and the label will make the browser focus that element on click. It's like a jump marker to a specific region. If you think of C (language) for example they have a concept called labels. It's meant to be clicked, the others are basically just text. So I assume this is the reason why the cursor is different. But it could be other reasons. Just my two cents. — F. Müller, Jan 18 '23 at 14:56

Run_Script · Accepted Answer · 2020-05-29T11:09:54.880

I don't think that there is a difference between the span cursor and the div cursor, at least there isn't for me in safari and I would assume other browsers are the same.

The div and span tags are both generic containers (see MDN docs) so it wouldn't make sense for them to have specific, different cursors. Browsers should simply display the default text cursor.

Labels are different. From w3schools:

Most browsers will display the element with the following default values:
label {
  cursor: default;
}

Which is the normal mouse-pointer. This is likely to be because the label element has a specific function, unlike the div or span – it is clickable and will affect the content of other input elements.

Generally, if I'm confused about a browser's default styles, I go to the w3schools CSS Default Values Reference, which usually explains why the browser is behaving as it is. You may also find this in the developer menu of the browser in question.

If you don't like the styles which the browser is applying, simply override them in your CSS. As you have already said in your question, specifying a cursor for the label tag would be a good solution.

Why different pointer on and /

1 Answers1