You can change « for » & « id » value by whatever you want btw :) https://www.w3schools.com/tags/att_label_for.asp
Remi GRUMEAU 06.63.68.72.06 https://remi-grumeau.com > Le 19 mars 2018 à 07:44, Rune Back <[email protected]> a écrit : > > My code was... > > <div class="row"> > <label>Living?</label> > <div class="toggle" role="toggle" onclick="" toggled=""> > <input type="hidden" name="value" value="true"> > <span class="thumb"></span> > </div> > </div> > > ...when it should be something like this... > > <div class="row"> > <div class="toggle" role="toggle"> > <input type="checkbox" name="mytoggle" id="mytoggle" value="true"> > <span class="thumb" data-on="ON" data-off="OFF"></span> > </div> > <label for="mytoggle">Living?</label> > </div> > > Thanks again, Remi! > > > 2018-03-18 0:48 GMT+02:00 Remi Grumeau <[email protected]>: >> Two errors in fact :) >> - Input should be a checkbox, not hidden. Otherwise, browser cannot toggle >> its value. >> - you must set an "id" attribute on the input + a "for" attribute on the >> label, so wihen you click on the label, it toggle the input value. Label >> goes 100% width, on top of the toggle. >> >> See this pen https://codepen.io/remi-grumeau/pen/dmpLvX?editors=1000 >> I added a green color on the label so you see how it covers the whole area. >> >> >> - bonus point : label should be after the div, not before it. can't remember >> exactly why but there is a CSS selector reason for that. >> >> Cheers, >> Remi >> >> >> Remi >> >>> On Sat, Mar 17, 2018 at 12:33 PM, Rune Back <[email protected]> wrote: >>> <!-- It looks OK, but it's R/O! --> >>> <div class="row"> >>> <label>Living?</label> >>> <div class="toggle" role="toggle" onclick="" toggled=""> >>> <input type="hidden" name="value" value="true"> >>> <span class="thumb"></span> >>> </div> >>> </div> >>> >>> Thankful for any help, >>> >>> Rune >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "iPhoneWebDev" group. >>> To unsubscribe from this group and stop receiving emails from it, send an >>> email to [email protected]. >>> To post to this group, send email to [email protected]. >>> Visit this group at https://groups.google.com/group/iphonewebdev. >>> For more options, visit https://groups.google.com/d/optout. >> >> -- >> You received this message because you are subscribed to the Google Groups >> "iPhoneWebDev" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To post to this group, send email to [email protected]. >> Visit this group at https://groups.google.com/group/iphonewebdev. >> For more options, visit https://groups.google.com/d/optout. > > -- > You received this message because you are subscribed to the Google Groups > "iPhoneWebDev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at https://groups.google.com/group/iphonewebdev. > For more options, visit https://groups.google.com/d/optout. -- You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/iphonewebdev. For more options, visit https://groups.google.com/d/optout.
