CSS styling of radio buttons

[Hubert]

Hello,

I'd like to make radio buttons look the same across browsers and I've been trying to replace browser defaults by my own styling.

I've used a lot of online resources but adapting them to TW and the <$radio/> widget has gotten me nowhere, so far. I'm still learning CSS and got stuck here.

Would anyone be willing to share their own CSS for custom radio buttons or a bare-bones "wireframe" type CSS code that I could build upon?

Any help would be appreciated.

Thank you,

Hubert

[Mat]

Presenting: http://radiobuttons.tiddlyspot.com/

<:-)

[Hubert]

Thank you Mat, that's very neat!

Shortly before you've posted I've completed my own solution:

input[type=radio] {

    display: none;

}

.tc-radio {

    margin-left: 35px;

    position: relative;

}

input[type=radio] + span {

    margin-left: -10px;

}

input[type=radio]:not(:checked) + span:before {

    content: "-";

    color: transparent;

    position: absolute;

    left: -35px;

    height: 12px;

    width: 12px;

    border: 4px solid #ddd;

    background: #ddd;

    border-radius: 50%;

    transition-duration: 0.2s;

}

input[type=radio]:not(:checked):hover + span:before {

    background: #ccc;

    transition-duration: 0.2s;

}

input[type=radio]:checked + span:before {

    content: "-";

    color: transparent;

    position: absolute;

    left: -35px;

    height: 12px;

    width: 12px;

    border: 4px solid #ddd;

    background: #333;

    border-radius: 50%;

}

I will look into yours more tomorrow and learn something new.

Thanks again!

Regards,

Hubert


On Thursday, 2 April 2020 20:41:52 UTC+1, Mat wrote:

Presenting: http://radiobuttons.tiddlyspot.com/

<:-)

[TonyM]

Hubert,

Another way to establish consistency may be to build buttons instead of trying to CSS for every platform. You can use your own buttons and images to do the equivalent of a more generalise function and they will thus appear more consistently.

For example radio buttons are just a way to represent a toggle, checkboxes as well.

Regards

Tony

[PMario]

On Thursday, April 2, 2020 at 9:41:52 PM UTC+2, Mat wrote:

Presenting: http://radiobuttons.tiddlyspot.com/

<:-)

@ Mat ... Does this work with FireFox too? ... It doesn't for me. FFlatest on ubuntu

-m

[Mat]

PMario wrote:

FireFox

Thanx. Fixed now. http://radiobuttons.tiddlyspot.com/   I didn't realize the RadioWidget has a build-in span so I used this now.

Huberts own solution seems to also not require extra elements or anything so I don't know if any of them is better.

<:-)