Feature Request - Off - Auto - On Toggle

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
image

3 Likes