Mock Google Input Form with HTML and CSS

This input form mocks the behaviour of Google's popular input forms. It requires no JavaScript to function and works thanks to the class selector

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>MOCK GOOGLE INPUT FORM</title>
	<style>
		*, *::before, *::after {
			box-sizing: border-box;
		}

		body {
			padding: 0;
			margin: 0;
			background-color: #eee;
			background-image: url(https://picsum.photos/id/1/1920/1080);
			background-size: cover;
			background-attachment: fixed;
			background-position: center center;
		}

		.form {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			padding: 25px;
			width: 100%;
			max-width: 600px;
			font-family: sans-serif;
			background-color: #fff;
			border-radius: 10px;
		}

			.form select,
			.form input[type="text"],
			.form textarea {
				padding: 15px;
				margin-bottom: 30px;
				width: 100%;
				resize: none;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: none;
				outline: none;
				border: 1px solid #ddd;
				background-color: transparent;
				max-width: 100%;
				color: inherit;
				border-radius: 5px;
				position: relative;
			}

			.form textarea {
				height: 125px;
			}

			.form select {
				padding: 13px 10px;
				max-width: 300px;
			}

			.form input[type="radio"],
			.form input[type="checkbox"] {
				width: auto;
			}

			.form div {
				position: relative;
			}

			.form span {
				position: absolute;
				top: 15px;
				left: 10px;
				transition: 0.25s;
				background-color: #fff;
				padding: 0 5px;
				font-weight: bold;
				color: #aaa;
				pointer-events: none;
			}

			.form select:focus,
			.form input[type="text"]:focus,
			.form textarea:focus {
				border: 2px solid #1a73e8; /* #1a73e8 is the color used by Google */
			}

			.form select:required,
			.form input:required,
			.form textarea:required {
				outline: none;
			}

			.form select:focus ~ span,
			.form input:focus ~ span,
			.form textarea:focus ~ span,
			.form select:valid ~ span,
			.form input:valid ~ span,
			.form textarea:valid ~ span {
				top: -7px;
				left: 10px;
				font-size: 12px;
				color: #1a73e8;
			}

			.form select:valid,
			.form input:valid,
			.form textarea:valid {
				border: 2px solid #1a73e8;
			}

			.form div:last-of-type {
				text-align: right;
			}

			.form input[type="submit"],
			.form input[type="button"] {
				background-color: #1a73e8;
				color: #fff;
				padding: 8px 28px;
				font-size: 14px;
				width: auto;
				border: 1px solid #1a73e8;
				outline: none;
				border-radius: 5px;
			}

				.form input[type="button"]:hover,
				.form input[type="button"]:focus,
				.form input[type="submit"]:hover,
				.form input[type="submit"]:focus {
					box-shadow: 0px 2px 3px rgba(26, 115, 232, 0.50);
				}
	</style>
</head>
<body>
	<form action="#" method="post">
		<div class="form">
			<div>
				<input type="text" name="name" required autocomplete="off" />
				<span>Name</span>
			</div>
			<div>
				<input type="text" name="email" required autocomplete="off" />
				<span>Email</span>
			</div>
			<div>
				<select name="month" required>
					<option></option>
					<option>Jan</option>
					<option>Feb</option>
					<option>Mar</option>
				</select>
				<span>Month</span>
			</div>
			<div>
				<textarea name="message" required></textarea>
				<span>Message</span>
			</div>
			<div>
				<input type="submit" value="Send" name="submit" />
			</div>
		</div>
	</form>
</body>
</html>

Coding Video

https://youtu.be/zOLk56jGSO0