Radio Button Text
January 23, 2024 5:30 PM
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);"> </label>
Discussion (3)
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);"> </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.
Hi Jason,
This code basically sets a label for a given radiobutton in a group transparant.
document.querySelector("#tobj54 > div > label").style.opacity = 0;
However i suspect you donot want to handpick all radiobuttons and want all radiobutton labels to be transparant.
The code below does that.
First you need to target all radiobuttons.
let allRadioButtons = triv$(":radio",getDisplayDocument());
If you run a console on those and check the id.
let allRadioButtons = triv$(":radio",getDisplayDocument());
let rbLength = allRadioButtons.length;
console.log("rbs "+rbLength);
for (var i=0; i<rbLength; i++){
console.log("name: "+allRadioButtons[i].id);
}
you now will notice the ids for all radiobuttons are like 'rad54' numbered.
As we noticed in the single selector for the transparant radio button to get to the label you need 'tobj' instead of 'rad'. In the past that was for Lectora Online only, desktop worked different. I am not sure whether that has been made similar in the latest version.
So now we can replace 'rad' by 'tobj' and run a selector on all radiobuttons.
In the end this script will make the labels of all your radiobuttons transparant :-)
let allRadioButtons = triv$(":radio",getDisplayDocument());
let rbLength = allRadioButtons.length;
console.log("rbs "+rbLength);
for (var i=0; i<rbLength; i++){
console.log("name: "+allRadioButtons[i].id);
let tobjName = allRadioButtons[i].id.replace("rad","tobj");
document.querySelector("#"+tobjName+" > div > label").style.opacity = 0;
}
Kind regards, happy Easter and have fun,
Math