0

I'm trying to make a Quiz App and I noticed that in between an input tag and a label tag the cursor turns into a text cursor.

Text cursor in between the tags (Can't embed it, because this is my first question on this site)

Pointer cursor on the label text

Default cursor on the input tag

I tried researching this issue on stackoverflow and found out that the little space in between is there because of a linebreak in my code:

<input type="radio" id="a" name="answer">
<label id="a_text"  for="a">Question</label>

I can remove the empty space by having the 2 tags on the same line right next to eachother, but I quite like that white space in between there.

<input type="radio" id="a" name="answer"><label id="a_text"  for="a">Question</label>

I want to know why that little space uses a text cursor and would like to ask if I can style the cursor for that space in CSS so that it looks normal again.

As i said earlier this is my first question on this site, so if there is anything that I could do to make these posts better, please tell me.

JoJ3o
  • 25
  • 5
  • Since you already know what it is about, on the duplicate, you'll find different methode to remove that gap in between. from the code or *css(in the futur?)* https://drafts.csswg.org/css-text-4/#white-space-collapsing or a display reset (table-cell,flex or grid) . – G-Cyrillus Sep 19 '20 at 12:42
  • It seems to me that the problem is not the whitespace but the cursor. The duplicate link doesn't answer that. It seems to me that the solution to remove this text cursor is to include the `input` in the `label`. – Armand Sep 19 '20 at 12:48
  • I kinda solved it by removing the line break and setting the margin for the input tag to 0. Then I can just increase the width of the input tag so that you can't accidentally click inbetween the input and the label. Also @Armand I don't know what you mean by putting the input tag in the label tag, could you elaborate on that? – JoJ3o Sep 19 '20 at 12:57
  • This (but the comment doesn't preserve line breaks): `` – Armand Sep 19 '20 at 12:59
  • here is a pot pourri of 9 ways to remove that gap : https://codepen.io/gc-nomade/pen/bGpmMdE If the cursor is the only issue, then reset it on the parent or use pointer-events to filter elements to catch it **or cure the gap and add a padding-left to the label if the text is not supposed to be against the input ;)** – G-Cyrillus Sep 19 '20 at 13:08
  • @Armand That works for a normal label, but for some reason when I make an id for that label, the input circle is gone. I use Javascript to show the actual choices, so that has probably something to do with it. – JoJ3o Sep 19 '20 at 13:17

0 Answers0