I follow what Mat said and hide the original styling. Here's an example
with green coloring that you can play around with...
input[type="radio"],
.tc-tiddler-body input[type="radio"],
.tc-tiddler-preview-preview input[type="radio"],
.tc-sidebar-scrollable input[type="radio"] {
-webkit-appearance: none;
background: none;
box-shadow: none;
height: 0;
margin: 0 0 0 1em;
padding: 0;
position: relative;
width: 0;
}
input[type="radio"]::before,
.tc-tiddler-body input[type="radio"]::before,
.tc-tiddler-preview-preview input[type="radio"]::before,
.tc-sidebar-scrollable input[type="radio"]::before {
background-color: rgba(var(--primary),0.2);
border: none;
border-radius: 1em;
box-shadow:
0 3px 0 -1px rgba(0,255,0,0.4),
0 0 0 1px rgb(0,255,0,0.45) inset,
0 -2px 0 -1px rgb(0,255,0,1) inset;
content: " ";
display: inline-block;
height: 0.75em;
left: -1em;
position: absolute;
top: -0.75em;
width: 0.75em;
}
input[type="radio"]:checked::before,
.tc-tiddler-body input[type="radio"]:checked::before,
.tc-tiddler-preview-preview input[type="radio"]:checked::before,
.tc-sidebar-scrollable input[type="radio"]:checked::before {
background-color: rgba(0,255,0,1);
border: none;
border-radius: 1em;
box-shadow:
0 3px 0 -1px rgba(0,255,0,0.4),
0 0 0 1px rgb(0,255,0,0.45) inset,
0 -2px 0 -1px rgb(0,255,0) inset;
content: " ";
display: inline-block;
height: 0.75em;
left: -1em;
position: absolute;
top: -0.75em;
width: 0.75em;
}
On Wednesday, July 7, 2021 at 6:12:22 AM UTC-7 Mat wrote:
> Yea, to style only the active button you could use something like
>
> .tc-radio-selected {background:lightgreen; }
>
> I don´t know how to target only the little circle so if you don´t want the
> label to not have that background then you can recolor it.
>
> .tc-radio-selected span {background:white;} <---- or maybe black in your
> case
>
> Otherwise, the typical way to style radio buttons is by hiding the whole
> button and create a totally new one. You can find a lot of info on this if
> you google for how to style radio buttons in html/css
>
> <:-)
> On Wednesday, July 7, 2021 at 3:04:35 PM UTC+2 S² wrote:
>
>> Hi Eric,
>>
>> still same...
>> [image: radio_nok.png]
>>
>> do I have to tag this tiddler?
>>
>> Thanks
>> Stefan
>> Eric Shulman schrieb am Mittwoch, 7. Juli 2021 um 14:54:51 UTC+2:
>>
>>> On Wednesday, July 7, 2021 at 4:12:38 AM UTC-7 S² wrote:
>>>
>>>> I would like to have a green active radio button (by default) - how can
>>>> that be done?
>>>>
>>>
>>> Try this bit of CSS magic:
>>> <style> .greenradio { filter:hue-rotate(300deg); } </style>
>>> <$radio field="X" value="foo" class="greenradio">foo</$radio>
>>> <$radio field="X" value="bar" class="greenradio">bar</$radio>
>>>
>>> enjoy,
>>> -e
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c52703e8-fcca-497c-9bba-ce347506ede1n%40googlegroups.com.
