# CSS question - template / ui-template node CSS

**URL:** <https://discourse.nodered.org/t/css-question-template-ui-template-node-css/89666>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [22 July 2024 10:51 UTC](https://discourse.nodered.org/t/css-question-template-ui-template-node-css/89666 "2024-07-22T10:51:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [22 July 2024 10:51 UTC](https://discourse.nodered.org/t/css-question-template-ui-template-node-css/89666/1 "2024-07-22T10:51:15Z")

</div>

```auto
[{"id":"1b987d6f1b3ed9d3","type":"ui_template","z":"5b623fd31ca86a42","group":"6339e2ead216512f","name":"","order":1,"width":"30","height":"22","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":765,"y":1525,"wires":[[]]},{"id":"db98fecd74502f33","type":"template","z":"5b623fd31ca86a42","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n* {\n border: 0;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n:root {\n font-size: calc(32px + (40 - 32)*(100vw - 320px)/ (1024 - 320));\n}\n\nbody {\n background-image: url(\"https://assets.codepen.io/416221/light_wood.jpeg\");\n background-position: 50% 50%;\n color: #381803;\n display: flex;\n font: 1em Nunito, sans-serif;\n height: 100vh;\n line-height: 1.5;\n}\n\nform {\n margin: auto;\n max-width: 10em;\n padding: 1.5em 0;\n position: relative;\n}\nform label:before, form span:before {\n border-radius: 50%;\n content: \"\";\n}\nform label {\n cursor: pointer;\n display: flex;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\nform label:before {\n background: radial-gradient(100% 100% at 33% 33%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 50%), radial-gradient(100% 100% at 67% 67%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);\n box-shadow: 0 0 0.75em #000 inset;\n display: inline-block;\n margin-right: 0.375em;\n width: 1.5em;\n height: 1.5em;\n}\nform label:not(:last-of-type) {\n margin-bottom: 1.5em;\n}\nform span {\n position: absolute;\n top: 1.75em;\n left: 0.25em;\n width: 1em;\n height: 1em;\n transition: transform 0.25s linear;\n z-index: 1;\n}\nform span, form span:before {\n display: block;\n}\nform span:before {\n background-color: #2762f3;\n background-image: radial-gradient(10% 10% at 50% 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)), radial-gradient(12% 12% at 60% 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)), radial-gradient(100% 100% at 60% 50%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.25) 50%);\n border-radius: 50%;\n box-shadow: 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.5), 0 0 0.1em 0.1em rgba(0, 0, 0, 0.25) inset;\n width: 100%;\n height: 100%;\n}\n\ninput {\n position: fixed;\n top: -1.5em;\n left: -1.5em;\n}\n\ninput:nth-of-type(1):checked ~ span {\n transform: translateY(0em);\n}\ninput:nth-of-type(1):checked ~ span:before {\n animation: wobble1 0.5s linear forwards;\n}\n\n@keyframes wobble1 {\n from, to {\n transform: translateY(0) scale(1);\n }\n 25% {\n transform: translateY(0) scale(1.33);\n }\n 50% {\n transform: translateY(0.25em) scale(1);\n }\n 67% {\n transform: translateY(-0.15em) scale(1);\n }\n 83% {\n transform: translateY(0.07em) scale(1);\n }\n}\ninput:nth-of-type(2):checked ~ span {\n transform: translateY(3em);\n}\ninput:nth-of-type(2):checked ~ span:before {\n animation: wobble2 0.5s linear forwards;\n}\n\n@keyframes wobble2 {\n from, to {\n transform: translateY(0) scale(1);\n }\n 25% {\n transform: translateY(0) scale(1.33);\n }\n 50% {\n transform: translateY(0.25em) scale(1);\n }\n 67% {\n transform: translateY(-0.15em) scale(1);\n }\n 83% {\n transform: translateY(0.07em) scale(1);\n }\n}\ninput:nth-of-type(3):checked ~ span {\n transform: translateY(6em);\n}\ninput:nth-of-type(3):checked ~ span:before {\n animation: wobble3 0.5s linear forwards;\n}\n\n@keyframes wobble3 {\n from, to {\n transform: translateY(0) scale(1);\n }\n 25% {\n transform: translateY(0) scale(1.33);\n }\n 50% {\n transform: translateY(0.25em) scale(1);\n }\n 67% {\n transform: translateY(-0.15em) scale(1);\n }\n 83% {\n transform: translateY(0.07em) scale(1);\n }\n}\ninput:nth-of-type(4):checked ~ span {\n transform: translateY(9em);\n}\ninput:nth-of-type(4):checked ~ span:before {\n animation: wobble4 0.5s linear forwards;\n}\n\n@keyframes wobble4 {\n from, to {\n transform: translateY(0) scale(1);\n }\n 25% {\n transform: translateY(0) scale(1.33);\n }\n 50% {\n transform: translateY(0.25em) scale(1);\n }\n 67% {\n transform: translateY(-0.15em) scale(1);\n }\n 83% {\n transform: translateY(0.07em) scale(1);\n }\n}\n/* Dark mode */\n@media screen and (prefers-color-scheme: dark) {\n body {\n background-image: url(\"https://assets.codepen.io/416221/dark_wood.jpeg\");\n color: #c58b50;\n }\n}\n</style>\n\n<form>\n <input id=\"one\" type=\"radio\" name=\"radios\" value=\"one\">\n <input id=\"two\" type=\"radio\" name=\"radios\" value=\"two\">\n <input id=\"three\" type=\"radio\" name=\"radios\" value=\"three\">\n <input id=\"four\" type=\"radio\" name=\"radios\" value=\"four\">\n <span></span>\n <label for=\"one\">One</label>\n <label for=\"two\">Two</label>\n <label for=\"three\">Three</label>\n <label for=\"four\">Four</label>\n</form>","output":"str","x":585,"y":1525,"wires":[["1b987d6f1b3ed9d3"]]},{"id":"afdad0a5f20b2a0d","type":"inject","z":"5b623fd31ca86a42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":415,"y":1525,"wires":[["db98fecd74502f33"]]},{"id":"6339e2ead216512f","type":"ui_group","name":"Group 2","tab":"5e0dd10e66fdea95","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"5e0dd10e66fdea95","type":"ui_tab","name":"TEST","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

```

I was trying to get some ideas of fancy radio buttons, and landed on this page,

> **[Styling Radio Buttons with CSS (59 Custom Examples)](https://www.sliderrevolution.com/resources/styling-radio-buttons/)**
>
> Styling radio buttons are elements on many websites. It is normal to see them in use on pages where completion of forms is necessary.

and tried to copy that into DB-1 with a template node. i got it almost right except that the background is not what it is supposed to be, could someone tell where did it go wrong ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b21947aae1581780c708bfe9c3ad4539fd3b6ad.jpeg)

![radio](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44c8b6e806becc4e2c6e49f02ab78e12ee80bd74.gif)  
 ![radio1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/925c8f1e6982b8848944280dfd8f98e6059791e5.gif)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [23 July 2024 06:28 UTC](https://discourse.nodered.org/t/css-question-template-ui-template-node-css/89666/2 "2024-07-23T06:28:48Z")

</div>

also, what changes are required if I want to make this arrangement horizontal ?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 August 2024 06:29 UTC](https://discourse.nodered.org/t/css-question-template-ui-template-node-css/89666/3 "2024-08-22T06:29:37Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.