Created
January 7, 2020 04:50
-
-
Save colabottles/d12d56b9d56505f27a4e4d7c443a475d to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/hifavoy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| font-size: 1.1rem; | |
| line-height: 1.5; | |
| } | |
| form { | |
| display: grid; | |
| grid-template-columns: repeat(6, min-content); | |
| grid-template-rows: repeat(6, max-content); | |
| } | |
| div { | |
| grid-column: 1/2; | |
| } | |
| label { | |
| font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
| grid-column: 1; | |
| } | |
| input { | |
| } | |
| input:checked + label { | |
| color: green; | |
| font-weight: bold; | |
| } | |
| input[type="checkbox"] { | |
| padding: 1rem; | |
| } | |
| button[type="submit"] { | |
| grid-column: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form> | |
| <div> | |
| <label for="username">Username</label> | |
| <input type="text" name="username" id="username"> | |
| </div> | |
| <div> | |
| <label for="password">Password</label> | |
| <input type="password" name="password" id="password"> | |
| </div> | |
| <div> | |
| <input type="checkbox" name="show-passwords" id="show-password"> | |
| <label for="show-password">Show password</label> | |
| </div> | |
| <button type="submit">Log In</button> | |
| </form> | |
| <script id="jsbin-javascript"> | |
| var password = document.querySelector('#password'); // The password field | |
| var toggleCheckbox = document.querySelector('#show-password'); // Toggle the checkbox | |
| // Toggle the password field | |
| function showPassword() { | |
| password.type = this.checked ? "text" : "password"; | |
| }; | |
| // Show/hide the password field | |
| toggleCheckbox.addEventListener("change", showPassword, false); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| font-size: 1.1rem; | |
| line-height: 1.5; | |
| } | |
| form { | |
| display: grid; | |
| grid-template-columns: repeat(6, min-content); | |
| grid-template-rows: repeat(6, max-content); | |
| } | |
| div { | |
| grid-column: 1/2; | |
| } | |
| label { | |
| font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
| grid-column: 1; | |
| } | |
| input { | |
| } | |
| input:checked + label { | |
| color: green; | |
| font-weight: bold; | |
| } | |
| input[type="checkbox"] { | |
| padding: 1rem; | |
| } | |
| button[type="submit"] { | |
| grid-column: 1; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var password = document.querySelector('#password'); // The password field | |
| var toggleCheckbox = document.querySelector('#show-password'); // Toggle the checkbox | |
| // Toggle the password field | |
| function showPassword() { | |
| password.type = this.checked ? "text" : "password"; | |
| }; | |
| // Show/hide the password field | |
| toggleCheckbox.addEventListener("change", showPassword, false); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| font-size: 1.1rem; | |
| line-height: 1.5; | |
| } | |
| form { | |
| display: grid; | |
| grid-template-columns: repeat(6, min-content); | |
| grid-template-rows: repeat(6, max-content); | |
| } | |
| div { | |
| grid-column: 1/2; | |
| } | |
| label { | |
| font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
| grid-column: 1; | |
| } | |
| input { | |
| } | |
| input:checked + label { | |
| color: green; | |
| font-weight: bold; | |
| } | |
| input[type="checkbox"] { | |
| padding: 1rem; | |
| } | |
| button[type="submit"] { | |
| grid-column: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var password = document.querySelector('#password'); // The password field | |
| var toggleCheckbox = document.querySelector('#show-password'); // Toggle the checkbox | |
| // Toggle the password field | |
| function showPassword() { | |
| password.type = this.checked ? "text" : "password"; | |
| }; | |
| // Show/hide the password field | |
| toggleCheckbox.addEventListener("change", showPassword, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment