/ Material Design

CSS Material Input Field

CSS Material Input Field

Material Input Field

A CSS Material Input Field example.

Made with

Html
Css/LESS

Html

<form>
	<h2>CSS Material Input Field</h2>

	<fieldset class="material">
		<input type="text" placeholder="John Doe" autocomplete="off" required>
		<hr>
		<label>First Name</label>
	</fieldset>
</form>

Css

html, body {
	font: 14px/1.21 Roboto, 'Helvetica Neue', arial, helvetica, sans-serif;
	background: #EEE;
}
form {
	margin: 20px;
	padding: 20px;
	background: #FFF;
}

.material {
	position: relative;
	padding: 0;
	margin: 5px;
	border: none;
	overflow: visible;
	
	input {
		box-sizing: border-box;
		width: 100%;
		padding: 12px 10px 8px;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid #DDD;
		font-size: 120%;
		outline: none;
		cursor: text;

		&::-webkit-input-placeholder {
			transition: color 300ms ease;
		}
		&:not(:focus)::-webkit-input-placeholder {
			color: transparent;
		}
	}
	
	hr {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 2px;
		border: none;
		background: #607D8B;
		font-size: 1px;
		will-change: transform, visibility;
		transition: all 200ms ease-out;
		transform: scaleX(0);
		visibility: hidden;
		z-index: 10;
	}
	input:focus ~ hr {
		transform: scaleX(1);
		visibility: visible;
	}
	
	label {
		position: absolute;
		top: 10px;
		left: 10px;
		font-size: 120%;
		color: #607D8B;
		transform-origin: 0 -150%;
		transition: transform 300ms ease;
		pointer-events: none;
	}
	input:focus ~ label,
	input:valid ~ label {
		transform: scale(0.6);
	}
}

Author

Jason Miller

Demo

See the Pen Material Input Field by Jason Miller (@developit) on CodePen.