Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 307222" data-attributes="member: 1872">Not coded in a while and tried to do something similar to the toggle buttons on iOS, got far enough then got bored.There's no parent element selector in CSS and I can't be bothered to use JavaScript to make the background colour of the onofftoggle element change to green when checked.Anyway, you can view the preview here: <a href="http://codepen.io/Markshall/pen/vIqdg" target="_blank">http://codepen.io/Markshall/pen/vIqdg</a>And code is below:[HTML]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Document&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body { padding: 60px; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .onofftoggle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f7f7f7;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .onofftoggle input[type=&quot;checkbox&quot;] {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .onofftoggle input[type=&quot;checkbox&quot;] + .onoffbutton {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 90%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-height: 23px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 2px 4px rgba(0, 0, 0, .3);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-transition: left .4s ease-in-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: left .4s ease-in-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .onofftoggle input[type=&quot;checkbox&quot;]:checked + .onoffbutton {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: calc(100% - 25px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;onofftoggle&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;checkbox&quot; name=&quot;check1&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;onoffbutton&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;onofftoggle&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;checkbox&quot; name=&quot;check2&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;onoffbutton&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;onofftoggle&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;checkbox&quot; name=&quot;check3&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;onoffbutton&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Hope it helps if you go with it,Mark.</blockquote>

[QUOTE="Markshall, post: 307222, member: 1872"] Not coded in a while and tried to do something similar to the toggle buttons on iOS, got far enough then got bored. There's no parent element selector in CSS and I can't be bothered to use JavaScript to make the background colour of the onofftoggle element change to green when checked. Anyway, you can view the preview here: [url]http://codepen.io/Markshall/pen/vIqdg[/url] And code is below: [HTML]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { padding: 60px; } .onofftoggle { width: 80px; border: 1px solid #ccc; border-radius: 25px; height: 25px; position: relative; background-color: #f7f7f7; } .onofftoggle input[type="checkbox"] { display: none; } .onofftoggle input[type="checkbox"] + .onoffbutton { display: block; background-color: #fff; border: 1px solid #ccc; border-radius: 25px; width: 25px; height: 90%; max-height: 23px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); cursor: pointer; position: absolute; left: 0; -webkit-transition: left .4s ease-in-out; transition: left .4s ease-in-out; } .onofftoggle input[type="checkbox"]:checked + .onoffbutton { left: calc(100% - 25px); } </style> </head> <body> <div class="onofftoggle"> <label> <input type="checkbox" name="check1" /> </label> </div> <div class="onofftoggle"> <label> <input type="checkbox" name="check2" /> </label> </div> <div class="onofftoggle"> <label> <input type="checkbox" name="check3" /> </label> </div> </body> </html>[/HTML] Hope it helps if you go with it, Mark. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members