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 Brian Radspinner schrieb am Mittwoch, 7. Juli 2021 um 16:21:51 UTC+2: > 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/b0993ae4-3885-4c26-a8f4-e2eac844f746n%40googlegroups.com.
