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
On Friday, April 3, 2020 at 7:08:43 AM UTC+11, Hubert wrote:
>
> 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/
>>
>> <:-)
>>
>
--
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/c95e8fcf-084d-492e-a2dc-83c6e2555aa3%40googlegroups.com.
