colored active radio button

[S²]

Hello forum,

I would like to have a green active radio button (by default) - how can that be done?

Thanks

Stefan

[Eric Shulman]

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

[S²]

Hi Eric,

still same...

do I have to tag this tiddler?

Thanks

Stefan

[Mat]

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

<:-)

[Brian Radspinner]

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;
}

[S²]

Thanks Brian,

very nice!

One additional question: how do I get more space between each selection?

<$radio field="sortorder" value="count"> Anzahl </$radio>  
<$radio field="sortorder" value="name"> Name </$radio>
<$radio field="sortorder" value="active"> Tiddler </$radio>

Code from Eric ( http://tiddlytools.com/filtergenerators.html#TiddlyTools%2FFilterGenerators%2FTagCloud )

Thanks

Stefan

[Eric Shulman]

On Wednesday, July 7, 2021 at 9:44:25 AM UTC-7 S² wrote:

One additional question: how do I get more space between each selection?

<$radio field="sortorder" value="count"> Anzahl </$radio>  

<$radio field="sortorder" value="name"> Name </$radio>
<$radio field="sortorder" value="active"> Tiddler </$radio>

To force additional space between elements, you can use &nbsp; or &emsp; HTML entities:

<$radio field="sortorder" value="count"> Anzahl </$radio> &nbsp;

<$radio field="sortorder" value="name"> Name </$radio> &nbsp;
<$radio field="sortorder" value="active"> Tiddler </$radio> &nbsp;

Alternatively, you could wrap each radio button within a span element, with a specified right margin style value:

<span style="margin-right:1em;"><$radio field="sortorder" value="count"> Anzahl </$radio></span>

<span style="margin-right:1em;"><$radio field="sortorder" value="name"> Name </$radio></span>

<span style="margin-right:1em;"><$radio field="sortorder" value="active"> Tiddler </$radio></span>

-e

[S²]

Thank you Eric - very nice!