input[type="password"]

demo/index.html

@@ -33,6 +33,7 @@ <h1>Примеры для плагина <a href="http://dimox.name/jquery-form-
 		<li data-hash="radio">Радиокнопки</li>
 		<li data-hash="file">Поле для выбора файла</li>
 		<li data-hash="number">Поле для ввода чисел</li>
+		<li data-hash="password">Поле ввода пароля</li>
 		<li data-hash="select">Одиночные селекты</li>
 		<li data-hash="multiselect">Мультиселекты</li>
 		<li data-hash="css">Прочие элементы форм (только CSS)</li>
@@ -106,6 +107,23 @@ <h2>Поле для ввода чисел</h2>
 			</div><!-- .section -->
 		</div><!-- .box -->
 
+		<div class="box">
+
+			<h2>Поле ввода пароля</h2>
+
+			<div class="section">
+				<label for="password">Введите пароль</label>
+				<br>
+				<input type="password" name="password" id="password" name="password" class="styler" size="60" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;" value="Мой пароль">
+				<br>
+				<br>
+				<label for="confirm_password">Подтвердите пароль</label>
+				<br>
+				<input type="password" name="password" name="confirm_password" id="confirm_password" class="styler" size="60" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;" value="Мой пароль">
+			</div>
+
+		</div><!-- .box -->
+
 		<div class="box">
 
 			<h2>Одиночные селекты</h2>

jquery.formstyler.css

@@ -230,6 +230,31 @@
 }
 
 
+.jq-password {
+	position: relative;
+	display : inline-block;
+}
+
+.jq-password__switch {
+	position: absolute;
+	top: 50%;
+	right: 6px;
+	-ms-transform : translateY(-50%);
+	    transform : translateY(-50%);
+	display: inline-block;
+    border-radius: 2px;
+    padding: 4px 6px;
+	background: #EBEBEB;
+	font-size: 12px;
+	line-height: 14px;
+	cursor: pointer;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+}
+
+
 .jq-selectbox {
 	vertical-align: middle;
 	cursor: pointer;

jquery.formstyler.js

@@ -37,6 +37,9 @@
 				selectVisibleOptions: 0,
 				singleSelectzIndex: '100',
 				selectSmartPositioning: true,
+				passwordShow: 'Показать',
+				passwordHide: 'Скрыть',
+				passwordSwitchHtml: false,
 				locale: 'ru',
 				locales: {
 					'en': {
@@ -45,7 +48,9 @@
 						fileNumber: 'Selected files: %s',
 						selectPlaceholder: 'Select...',
 						selectSearchNotFound: 'No matches found',
-						selectSearchPlaceholder: 'Search...'
+						selectSearchPlaceholder: 'Search...',
+						passwordShow: 'Show',
+						passwordHide: 'Hide',
 					}
 				},
 				onSelectOpened: function() {},
@@ -448,6 +453,51 @@
 
 			// end number
 
+			// password
+			} else if (el.is('input[type="password"]')) {
+
+				var password =
+					$('<div class="jq-password">' +
+						'<div class="jq-password__switch">' +
+							(opt.passwordSwitchHtml || opt.passwordShow) +
+						'</div>' +
+					'</div>');
+
+				password.on('click', '.jq-password__switch', function() {
+
+					var switcher = $(this),
+						wrapper = switcher.closest('.jq-password'),
+						input = el;
+
+					if (wrapper.hasClass('jq-password_seen')) {
+
+						if (!opt.passwordSwitchHtml) {
+							switcher.text(opt.passwordShow);
+						}
+
+						wrapper
+							.removeClass('jq-password_seen');
+
+						input.attr('type', 'password');
+
+					} else {
+
+						if (!opt.passwordSwitchHtml) {
+							switcher.text(opt.passwordHide);
+						}
+
+						wrapper
+							.addClass('jq-password_seen');
+
+						input.attr('type', 'text');
+					}
+
+				});
+
+				el.after(password).prependTo(password);
+
+			// end password
+
 			// select
 			} else if (el.is('select')) {