LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic);

body {
	background: #fff;
	color: #333;
	font: 1em 'Lato', sans-serif;
}

#login {
	margin: 1em;
}

#login *:focus {
	outline-style: none;
}

#login div {
	margin-bottom: 0.5em;
}

#login #pwd {
	width: 200px;
	font: 1em 'Lato', sans-serif;
	padding: 0.3em;
	border: 1px solid #ddd;
	background: #fff;
}

#login input[type="submit"] {
	font: 900 1em 'Lato', sans-serif;
	padding: 0.4em 1.3em;
	border: 2px solid #000;
	background: #fff;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;	
}
JS
(function() {
	
	var PasswordToggler = function( element, field ) {
		this.element = element;
		this.field = field;
		
		this.toggle();	
	};
	
	PasswordToggler.prototype = {
		toggle: function() {
			var self = this;
			self.element.addEventListener( "change", function() {
				if( self.element.checked ) {
					self.field.setAttribute( "type", "text" );
				} else {
					self.field.setAttribute( "type", "password" );	
				}
            }, false);
		}
	};
	
	document.addEventListener( "DOMContentLoaded", function() {
		var checkbox = document.querySelector( "#show-hide" ),
			pwd = document.querySelector( "#pwd" ),
			form = document.querySelector( "#login" );
			
			form.addEventListener( "submit", function( e ) {
				e.preventDefault();
			}, false);
			
			var toggler = new PasswordToggler( checkbox, pwd );
		
	});
	
})();
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID