Floating input labels/placeholders with HTML/CSS

by katalin_2003

HTML

<form action="">
	<input type="text" id="fullName" name="fullName" placeholder=" ">
	<label for="fullName">Full Name</label>
	<input type="email" id="email" name="email" placeholder=" ">
	<label for="email">Email</label>
	<input type="password" id="password" name="password" placeholder=" ">
	<label for="password">Password</label>
	<button type="button">SUBMIT</button>
</form>

CSS

body {
	display: flex;
	font-family: arial, sans-serif;
}

form {
	width: 30rem;
	display: block;
	margin: 3rem auto;
	padding: 3rem;
	border: 10px solid #999;
}

label {
	display: block;
	transform: translate(0, -2rem);
}

input {
	width: 100%;
	margin-top: 1.5rem;
	padding: 0.6rem;
	border: none;
	border: 2px solid #111;
	transition: border-color 0.2s ease;
}

input:focus {
	outline: none;
	border-color: green;
}

button {
	padding: 0.75rem 1.5rem;
	border: 2px solid #111;
	background-color: #111;
	color: #fff;
	font-weight: bold;
}

@supports (not (-ms-ime-align:auto)) {
	label {
		color: #999;
		transform: translate(0.7rem, -1.75rem);
		transition: all 0.2s ease-out;
	}

	/* Comment first line to make the label float if the user types some text */
	input:focus + label,
	input:not(:placeholder-shown) + label {
		color: #111;
		transform: translate(0, -3.5rem);
	}
}