Solved

Radio Button Text

I'm working with radio button groups and trying to do some customizations on the label text. What I'd LIKE to do is make the text transparent, which I can do when I inspect the element and drill down to the span for the radio. There, I can change the color, even make it transparent which would be ideal for the intent, but I can't figure out how to get there with CSS.


Ultimately, the point is to expand the clickable width of the radio button to emulate how it would work if there were a label there, but NOT have the label visible so that the text underneath is there. There is not a font that exactly matches the text from my screenshots, which is why I'm trying to get the "invisible" labels to work. I have a sample, but don't see where to add it anymore with the current forum, so someone's going to have to point to where that is on this new setup...


Solution

Hi @jasonadal It may be easiest for you to use a hard space to cause the label to be empty but expand the clickable width of the radio button as you desire. In the Radio properties Label name field enter Alt+0160 as many times as you need for the length. These will be honored in the HTML instead of blank text spaces, note the  's in the resulting code below.

If you are using Lectora Desktop you will need to use Ctrl+Shift+Space.

Hope this helps!


<label for="rad290067" style="font-size: 14pt; font-family: Roboto; color: rgb(0, 0, 0);">           </label>


<label for="rad290065" style="font-size: 14pt; font-family: Roboto; color: rgb(255, 0, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

Discussion (2)

Hi @jasonadal It may be easiest for you to use a hard space to cause the label to be empty but expand the clickable width of the radio button as you desire. In the Radio properties Label name field enter Alt+0160 as many times as you need for the length. These will be honored in the HTML instead of blank text spaces, note the &nbsp;'s in the resulting code below.

If you are using Lectora Desktop you will need to use Ctrl+Shift+Space.

Hope this helps!


<label for="rad290067" style="font-size: 14pt; font-family: Roboto; color: rgb(0, 0, 0);">           </label>


<label for="rad290065" style="font-size: 14pt; font-family: Roboto; color: rgb(255, 0, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

I'll have to see what this does when it comes to ARIA and screen readers. If it starts reading it as spaces, that's not a viable solution. I'll give it a try and report back.