给密码框添加一个显示隐藏开关

	
	
	
		@charset "UTF-8";
		.ml2 {
			margin-left: 2rem;
		}
		.toggle {
			background: #ccc;
			border-radius: 40em;
			cursor: pointer;
			display: inline-block;
			padding: 1px;
			position: relative;
			width: 40px;
			height: 1.25rem;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			vertical-align: middle;
		}
		.toggle:before, .toggle:after {
			color: #777777;
			position: absolute;
			top: 50%;
			-webkit-transform: translatey(-50%);
			-ms-transform: translatey(-50%);
			transform: translatey(-50%);
		}
		.toggle:before {
			content: "";
			font-size: 10px;
			right: 110%;
		}
		.toggle:after {
			content: "ABC";
			font-size: 12px;
			left: 110%;
		}
		.toggle.is-alpha .toggle-button {
			left: 21px;
		}
		.toggle-button {
			background: #fff;
			border-radius: 40em;
			display: inline-block;
			height: 1.25rem;
			width: 1.25rem;
			position: absolute;
			left: 1px;
			top: 1px;
			-webkit-transition: left 0.05s linear;
			transition: left 0.05s linear;
		}
		.centerer {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
	


	
	
		
输入密码,点击右侧的开关查看效果
		
		
			

(function () { $('.toggle').on('click', function () { var password, type; password = $('.password'); type = password.attr('type'); if (type === 'password') { password.attr('type', 'text'); return $(this).addClass('is-alpha'); } else { password.attr('type', 'password'); return $(this).removeClass('is-alpha'); } }); }.call(this));