PROWAREtech
CSS: Mock Google Form
HTML and CSS only.
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 input[type="password"],
.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 select + span,
.form input[type="text"] + span,
.form input[type="password"] + span,
.form textarea + 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 input[type="password"]:focus,
.form textarea:focus,
.form select:valid,
.form input[type="text"]:valid,
.form input[type="password"]:valid,
.form textarea:valid {
border: 2px solid #1a73e8; /* #1a73e8 is the color used by Google */
}
.form select:required,
.form input[type="text"]:required,
.form input[type="password"]: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 div:last-of-type {
text-align: right;
}
.form input[type="submit"],
.form button {
background-color: #1a73e8;
color: #fff;
padding: 8px 28px;
font-size: 14px;
width: auto;
border: 1px solid #1a73e8;
outline: none;
border-radius: 5px;
}
.form button:hover,
.form 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>
<button type="submit" name="submit">Send</button>
</div>
</div>
</form>
</body>
</html>
Coding Video
Comment
