Don't Think Twice, It's All Right
-- Bob Dylan
The .toggle_radio label misses the line-height: 18px to get text vertically aligned
Fixed version
[{"id":"772297c4.f05598","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"3-way switch","order":12,"width":"6","height":"1","format":"<div class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n <input type=\"radio\" class=\"toggle_option\" id=\"first_toggle\" name=\"toggle_option\">\n <input type=\"radio\" checked class=\"toggle_option\" id=\"second_toggle\" name=\"toggle_option\">\n <input type=\"radio\" class=\"toggle_option\" id=\"third_toggle\" name=\"toggle_option\">\n <label for=\"first_toggle\"><p>First</p></label>\n <label for=\"second_toggle\"><p>Second</p></label>\n <label for=\"third_toggle\"><p>Third</p></label>\n <div class=\"toggle_option_slider\">\n </div>\n</div>\n \n<style>\n.switchwrapper {\n margin: auto 0;\n}\n.toggle_radio{\n position: relative; \n margin: auto;\n overflow: hidden;\n border-radius: 50px;\n position: relative;\n height: 26px;\n border: 1px solid gray;\n background: #1111116b;\n}\n.toggle_radio > * {\n float: left;\n}\n.toggle_radio input[type=radio]{\n display: none;\n}\n.toggle_radio label{\n display: block;\n width: 33%;\n height: 20px;\n margin: 0;\n line-height :18px;\n border-radius: 50px;\n cursor: pointer;\n z-index: 1;\n text-align: center;\n}\n.toggle_radio label >p {\n background:transparent;\n}\n.toggle_option_slider{\n width: 33%;\n height: 20px;\n position: absolute;\n top: 3px;\n border-radius: 50px;\n transition: all .4s ease;\n}\n\n#first_toggle:checked ~ .toggle_option_slider{\n background: rgba(255,255,255,.3);\n left: 3px;\n}\n#second_toggle:checked ~ .toggle_option_slider{\n background: rgba(255,255,255,.3);\n left: 33%\n}\n#third_toggle:checked ~ .toggle_option_slider{\n background: rgba(255,255,255,.3);\n left: 66%;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":240,"y":1000,"wires":[[]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Looks like this for me
