<form action="#0">
<div>
<input type="text" id="first_name" name="first_name" required placeholder=" " />
<label for="first_name">First Name</label>
</div>
<div>
<input type="text" id="last_name" name="last_name" required placeholder=" " />
<label for="last_name">Last Name</label>
</div>
<div>
<input type="email" id="email" name="email" required placeholder=" " />
<label for="email">Email Address</label>
<div class="requirements">
Must be a valid email address.
</div>
</div>
<div>
<input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" />
<label for="password">Password</label>
<div class="requirements">
Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
</div>
</div>
<input type="submit" value="Sign Up" />
</form>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
form {
max-width: 450px;
margin: 0 auto;
// positioning context
> div {
position: relative;
background: white;
border-bottom: 1px solid #ccc;
// Looks like placeholder
> label {
opacity: 0.3;
font-weight: bold;
position: absolute;
top: 22px;
left: 20px;
}
> input[type="text"],
> input[type="email"],
> input[type="password"] {
width: 100%;
border: 0;
padding: 20px 20px 20px 50px;
background: #eee;
&:focus {
// removing default focus style
outline: 0;
// adding new one
background: white;
& + label {
opacity: 0;
}
}
&:valid {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 20px 20px;
& + label {
opacity: 0;
}
}
&:invalid:not(:focus):not(:placeholder-shown) {
background: pink;
& + label {
opacity: 0;
}
}
&:invalid:focus:not(:placeholder-shown) {
& ~ .requirements {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}
.requirements {
padding: 0 30px 0 50px;
color: #999;
max-height: 0;
transition: 0.28s;
overflow: hidden;
color: red;
font-style: italic;
}
}
input[type="submit"] {
display: block;
width: 100%;
margin: 20px 0;
background: #41D873;
color: white;
border: 0;
padding: 20px;
font-size: 1.2rem;
}
}
body {
background: #333;
font-family: 'PT Sans', sans-serif;
padding: 20px;
}
* {
box-sizing: border-box;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.