Inputs and Textarea

Basic

Name
Input type number
Email
Password
Password
Message

Line

Name
Password
Message

Placeholders

Line Placeholders

Links:

PHP
<!-- Basic -->
<div class="form_item">
	<span class="pre_input">Name</span>
	<label>
		<input type="text" name="name" class="input">
	</label>
</div>

<div class="form_item">
	<span class="pre_input">Input type number</span>
	<label>
		<input type="number" name="name" class="input" inputmode="numeric">
	</label>
</div>

<div class="form_item">
	<span class="pre_input">Email</span>
	<div class="input_icon">
		<div class="svg_wrap">
			<?= svg('iconChat2','') ?>
		</div>
		<div class="input_wrap">
			<label>
				<input type="email" name="email" class="input">
			</label>
		</div>
	</div>
</div>

<div class="form_item">
	<span class="pre_input">Password</span>
	<label class="label_input_icon">
		<input type="password" name="password" class="input">
		<?= svg('iconLock2','') ?>
	</label>
</div>
		
<div class="form_item">
	<span class="pre_input">Password</span>
	<label class="label_input_icon">
		<input type="password" name="password" class="input || input_password">
		<?= svg('iconLock2','') ?>
		<span class="show_password">
            <?= svg('iconVisibilityOn2','eye_showing') ?>
            <?= svg('iconVisibilityOff2','eye_hidden') ?>
        </span>
	</label>
</div>

<div class="form_item">
	<span class="pre_input">Message</span>
	<label>
		<textarea name="message" class="input"></textarea>
	</label>
</div>
	
<!-- Placeholders -->
<div class="form_item">
	<label>
		<input type="text" name="name" class="input" placeholder="Name">
	</label>
</div>

<div class="form_item">
	<div class="input_icon">
		<div class="svg_wrap">
			<?= svg('iconChat2','') ?>
		</div>
		<div class="input_wrap">
			<label>
				<input type="email" name="email" class="input" placeholder="Email">
			</label>
		</div>
	</div>
</div>

<div class="form_item">
	<label class="label_input_icon">
		<input type="password" name="password" class="input" placeholder="Password">
		<?= svg('iconLock2','') ?>
	</label>
</div>

<div class="form_item">
	<label>
		<textarea name="message" class="input" placeholder="Message"></textarea>
	</label>
</div>

<!-- Line -->
<div class="form_item">
	<span class="pre_input">Name</span>
	<label>
		<input type="text" name="name" class="input_line">
	</label>
</div>

<div class="form_item">
	<span class="pre_input">Password</span>
	<label class="label_input_line_icon">
		<input type="password" name="password" class="input_line">
		<?= svg('iconLock2','') ?>
	</label>
</div>

<div class="form_item">
	<span class="pre_input">Message</span>
	<label>
		<textarea name="message" class="input_line"></textarea>
	</label>
</div>
	
<!-- Line Placeholders -->
<div class="form_item">
	<label>
		<input type="text" name="name" class="input_line" placeholder="Name">
	</label>
</div>

<div class="form_item">
	<label class="label_input_line_icon">
		<input type="password" name="password" class="input_line" placeholder="Password">
		<?= svg('iconLock2','') ?>
	</label>
</div>

<div class="form_item">
	<label>
		<textarea name="message" class="input_line" placeholder="Message"></textarea>
	</label>
</div>
Mention
/* В залежності від шрифта використовувати властивість padding-top для вертикального вирівнювання тексту в input */

/* Chrome, Safari */
.input {padding: .7rem 1rem 0;}

/* Firefox */
@-moz-document url-prefix() {
	.input {padding: .4rem 1rem 0;}
}

/* ME */
@supports (-ms-ime-align:auto) {
	.input {padding: .4rem 1rem 0;}
}

/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.input {padding: .3rem 1rem 0;}
}
CSS
::-webkit-input-placeholder{color:#4A6572;-webkit-transition:all .3s;transition:all .3s}
:-moz-placeholder{color:#4A6572;-moz-transition:all .3s;transition:all .3s}
::-moz-placeholder{color:#4A6572;-moz-transition:all .3s;transition:all .3s}
:-ms-input-placeholder{color:#4A6572;-ms-transition:all .3s;transition:all .3s}
::-ms-input-placeholder{color:#4A6572;-ms-transition:all .3s;transition:all .3s}
::placeholder{color:#4A6572;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;transition:all .3s}

.form_item{margin:1rem 0 1.5rem}
.form_item .pre_input{display:block;margin:0 0 .3rem}

/* Basic */
.input{display:block;width:100%;max-width:100%;height:4rem;font-size:1.5rem;padding:0 1rem;border:.1rem solid #cfcfcf;background-color:#fff;color:#000;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;border-radius:.3rem;-webkit-transition:-webkit-box-shadow .2s ease-in;transition:-webkit-box-shadow .2s ease-in;-o-transition:box-shadow .2s ease-in;-moz-transition:box-shadow .2s ease-in,-moz-box-shadow .2s ease-in;transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in,-webkit-box-shadow .2s ease-in,-moz-box-shadow .2s ease-in}
.input:focus,.input:active{outline-style:none;-webkit-box-shadow:0 0 0 .3rem rgba(146,153,169,0.25);-moz-box-shadow:0 0 0 .3rem rgba(146,153,169,0.25);box-shadow:0 0 0 .3rem rgba(146,153,169,0.25)}
.input::-webkit-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input:-moz-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input::-moz-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input:-ms-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input::-ms-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input::placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;-o-text-overflow:ellipsis;text-overflow:ellipsis}

.input:focus::-webkit-input-placeholder{opacity:0}
.input:focus:-moz-placeholder{opacity:0}
.input:focus::-moz-placeholder{opacity:0}
.input:focus:-ms-input-placeholder{opacity:0}
.input:focus::-ms-input-placeholder{opacity:0}
.input:focus::placeholder{opacity:0}
.input:-webkit-autofill,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 4rem #fff inset!important;-webkit-text-fill-color:#000!important}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 4rem #fff inset!important;-webkit-text-fill-color:#000!important}
}

/* Line */
.input_line{display:block;width:100%;max-width:100%;height:4rem;font-size:1.5rem;border:none;border-bottom:.1rem solid #cfcfcf;background-color:transparent;color:#000;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-transition:border-bottom .2s ease-in;-o-transition:border-bottom .2s ease-in;-moz-transition:border-bottom .2s ease-in;transition:border-bottom .2s ease-in}
.input_line:focus,.input_line:active{outline-style:none;border-bottom:.1rem solid #9299a9}
.input_line::-webkit-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input_line:-moz-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input_line::-moz-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input_line:-ms-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input_line::-ms-input-placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;text-overflow:ellipsis}
.input_line::placeholder{font-family:'Nunito Sans',sans-serif;font-size:1.5rem;font-weight:400;color:#4A6572;opacity:1;-o-text-overflow:ellipsis;text-overflow:ellipsis}

.input_line:focus::-webkit-input-placeholder{opacity:0}
.input_line:focus:-moz-placeholder{opacity:0}
.input_line:focus::-moz-placeholder{opacity:0}
.input_line:focus:-ms-input-placeholder{opacity:0}
.input_line:focus::-ms-input-placeholder{opacity:0}
.input_line:focus::placeholder{opacity:0}
.input_line:-webkit-autofill,.input_line:-webkit-autofill:focus,.input_line:-webkit-autofill:active{-webkit-box-shadow:0 0 0 4rem #fff inset!important;-webkit-text-fill-color:#000!important}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.input_line:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 4rem #fff inset!important;-webkit-text-fill-color:#000!important}
}

/* Input with icon in box */
.input_icon{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.input_icon .svg_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:4rem;background-color:#f4f4f4;border:.1rem solid #cfcfcf;-webkit-border-radius:.3rem 0 0 .3rem;-moz-border-radius:.3rem 0 0 .3rem;border-radius:.3rem 0 0 .3rem;margin-right:-.1rem}
.input_icon .svg_wrap .icon{width:1.7rem;height:1.7rem;color:#989898}
.input_icon .input_wrap{-webkit-box-flex:1;-webkit-flex:1 1 auto;-moz-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:1%}
.input_icon .input{margin:0;-webkit-border-radius:0 .3rem .3rem 0;-moz-border-radius:0 .3rem .3rem 0;border-radius:0 .3rem .3rem 0;-webkit-transition:background-color .2s ease-in;-o-transition:background-color .2s ease-in;-moz-transition:background-color .2s ease-in;transition:background-color .2s ease-in}
.input_icon .input:focus,.input_icon .input:active{-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset;background-color:rgba(255,255,255,0.8)}

/* Input with icon */
.label_input_icon{display:block;position:relative}
.label_input_icon .icon{position:absolute;top:1.2rem;left:1.2rem;height:1.6rem;width:1.6rem;color:#989898}
.label_input_icon .input{padding:0 1rem 0 3.5rem}

/* Line input with icon */
.label_input_line_icon{display:block;position:relative}
.label_input_line_icon .icon{position:absolute;top:1.2rem;left:0;height:1.6rem;width:1.6rem;color:#989898}
.label_input_line_icon .input_line{padding:0 0 0 2.5rem}

textarea.input{min-height:12.8rem;padding-top:.5rem;resize:none}
textarea.input_line{min-height:12.8rem;padding-top:.5rem;resize:none}

/* input [type=number] */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Firefox */
input[type=number]{-moz-appearance:textfield!important}

/* Show/Hide Password */
.show_password{display:block;width:1.6rem;height:1.6rem;position:absolute;top:53%;right:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}
.show_password .icon{position:static;width:1.6rem;height:1.6rem}
.show_password .eye_showing{display:block}
.show_password .eye_hidden{display:none}
.show_password.showing .eye_showing{display:none}
.show_password.showing .eye_hidden{display:block}
SCSS
/* Vars */
$font:               'Nunito Sans', sans-serif;
$white:              #ffffff;
$cb:                 #000000;
$inputColor:         $cb;
$inputBack:          $white;
$inputBackLine:      transparent;
$inputBorder:        #cfcfcf;
$placeholderColor:   #4A6572;
$focusColor:         #9299a9;
$inputIconColor:     #989898;
$inputIconBg:        #f4f4f4;
$inputRad:           .3rem;
$inputRadLine:       0;

::placeholder {
	color: $placeholderColor;
	transition: all .3s;
}

.form_item {
	margin: 1rem 0 1.5rem;
	
	.pre_input {
		display: block;
		margin: 0 0 0.3rem;
	}
}

/* Basic */
.input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 4rem;
	font-size: 1.5rem;
	padding: 0 1rem;
	border: .1rem solid $inputBorder;
	background-color: $inputBack;
	color: $inputColor;
	border-radius: $inputRad;
	transition: box-shadow 0.2s ease-in;
	
	&:focus, &:active {
		outline-style: none;
		box-shadow: 0 0 0 .3rem rgba($focusColor, 0.25);
	}
	
	&::placeholder {
		font-family: $font;
		font-size: 1.5rem;
		font-weight: 400;
		color: $placeholderColor;
		opacity: 1;
		text-overflow: ellipsis;
	}
	
	&:focus {
		&::placeholder {
			opacity: 0;
		}
	}
	
	&:-webkit-autofill,
	&:-webkit-autofill:focus,
	&:-webkit-autofill:active{
		-webkit-box-shadow: 0 0 0 4rem $inputBack inset !important;
		-webkit-text-fill-color: $inputColor !important;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.input {
		&:-webkit-autofill:hover {
			-webkit-box-shadow: 0 0 0 4rem $inputBack inset !important;
			-webkit-text-fill-color: $inputColor !important;
		}
	}
}

/* Line */
.input_line {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 4rem;
	font-size: 1.5rem;
	border: none;
	border-bottom: .1rem solid $inputBorder;
	background-color: $inputBackLine;
	color: $inputColor;
	border-radius: $inputRadLine;
	transition: border-bottom 0.2s ease-in;
	
	&:focus, &:active {
		outline-style: none;
		border-bottom: .1rem solid $focusColor;
	}
	
	&::placeholder {
		font-family: $font;
		font-size: 1.5rem;
		font-weight: 400;
		color: $placeholderColor;
		opacity: 1;
		text-overflow: ellipsis;
	}
	
	&:focus {
		&::placeholder {
			opacity: 0;
		}
	}
	
	&:-webkit-autofill,
	&:-webkit-autofill:focus,
	&:-webkit-autofill:active{
		-webkit-box-shadow: 0 0 0 4rem $inputBack inset !important;
		-webkit-text-fill-color: $inputColor !important;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.input_line {
		&:-webkit-autofill:hover{
			-webkit-box-shadow: 0 0 0 4rem $inputBack inset !important;
			-webkit-text-fill-color: $inputColor !important;
		}
	}
}

/* Input with icon in box */
.input_icon {
	display: flex;
	flex-wrap: wrap;
	
	.svg_wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		background-color: $inputIconBg;
		border: 0.1rem solid $inputBorder;
		border-radius: 0.3rem 0 0 0.3rem;
		margin-right: -.1rem;
		
		.icon {
			width: 1.7rem;
			height: 1.7rem;
			color: $inputIconColor;
		}
	}
	
	.input_wrap {
		flex: 1 1 auto;
		width: 1%;
	}
	
	.input {
		margin: 0;
		border-radius:0 .3rem .3rem 0;
		transition: background-color 0.2s ease-in;
		
		&:focus, &:active {
			box-shadow: unset;
			background-color: rgba($white, .8);
		}
	}
}

/* Input with icon */
.label_input_icon {
	display: block;
	position: relative;
	
	.icon {
		position: absolute;
		top: 1.2rem;
		left: 1.2rem;
		height: 1.6rem;
		width: 1.6rem;
		color: $inputIconColor;
	}
	
	.input {
		padding: 0 1rem 0 3.5rem;
	}
}

/* Line input with icon */
.label_input_line_icon {
	display: block;
	position: relative;
	
	.icon {
		position: absolute;
		top: 1.2rem;
		left: 0;
		height: 1.6rem;
		width: 1.6rem;
		color: $inputIconColor;
	}
	
	.input_line {
		padding: 0 0 0 2.5rem;
	}
}

textarea.input {
	min-height: 12.8rem;
	padding-top: .5rem;
	resize: none;
}

textarea.input_line {
	min-height: 12.8rem;
	padding-top: .5rem;
	resize: none;
}

/* input [type=number] */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield !important;
}
	.label_input_icon .input.input_password {
	padding: 0 3.5rem 0 3.5rem;
}

/* Show/Hide Password */
.show_password {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	top: 53%;
	right: 1.2rem;
	user-select: none;
	cursor: pointer;
	transform: translate(0, -50%);
	
	.icon {
		position: static;
		width: 1.6rem;
		height: 1.6rem;
	}
	
	.eye_showing {
		display: block;
	}
	
	.eye_hidden {
		display: none;
	}
	
	&.showing {
		.eye_showing {
			display: none;
		}
		
		.eye_hidden {
			display: block;
		}
	}
}
JavaScript
/* input[type=number] textfield fix */

$('.input[type=number]').keypress(function (e) {
	var charCode = (e.which) ? e.which : event.keyCode;
	if (String.fromCharCode(charCode).match(/[^0-9]/g)) {
		return false;
	}
});

/* Show/Hide Password */
$('body').on('click', '.show_password', function () {
	var $this = $(this),
		inputPass = $this.closest('.form_item').find('.input_password');
	
	if ($this.hasClass('showing')) {
		$this.removeClass('showing');
		inputPass.attr('type', 'password');
	} else {
		$this.addClass('showing');
		inputPass.attr('type', 'text');
	}
});