react-aria radio inline styling

[jake28mc]

Hi all, I'm trying to create a reusable wrapper with react-aria's Radio Group, but have stumbled into a snag when trying to style things.
The Radio component is made of a label with a span and input inside it. I want to style the span to suit my needs, but it appears to have the following inline styling which renders it invisible. Do I need to pass a prop or something to override this?
Any help would be appreciated, thankyou

border: 0px;
clip: rect(0px, 0px, 0px, 0px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
width: 1px;
white-space: nowrap;

[snowystinger]

Can you say more about why you need the native input to be visible? It'd just look like a native one.

We use a before pseudo element in this example https://react-spectrum.adobe.com/react-aria/RadioGroup.html#example but you could add whatever elements you want as children in order to style your radio. You could make it a circle like we do, or you could make a star or a card, anything you like. There are some more examples a little further down as well, see https://react-spectrum.adobe.com/react-aria/RadioGroup.html#examples

[jake28mc]

I figured that I should use the existing span that was there since my intention is to add a span anyway - is there any way to remove that default invisible span so that I don't have two as children of the label?

[snowystinger]

It's there to hide the native control which you cannot style.
If you turn off the styles on that span, you can see it appear. Like so:

If you don't want to add a span, you can use a psuedo element like we do. Maybe a better question though is, why do you not want to add a new element?

[jake28mc]

I'm happy to add another span - just thought it was weird that there was also a random visually hidden span that I couldn't get rid of.
Thankyou for your help! I've got my radio button working now :)