폼 관련 가상클래스를 활용한 실전 퍼블리싱 (로그인 화면)

완성본

html

<form class="login">
	<span>Email</span>
    <input type="email" placeholder="Email Address">
    <span>Password</span>
    <input type="password" placeholder="Password">
    <p>
    	<label>
        	<input type="checkbox"> Keep me logged in
        </label>
        <a href="#none" class="btn-forgot">Forgot Your Password?Log in</a>
    </p>
    <button>Log in</button>
</form>

CSS

.login {
	width:800px;
    background-color:#f5f5f5;
    border:1px solid #eee;
    border-radius: 5px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
. login span {
	font-weight: bold;
    display: block;
}
. login input[type=email],
. login input[type=password] {
	width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
}
. login input[type=email]::placeholder,
. login input[type=password]::placeholder {
	opacity: 1;
    transition: 0.3s;
}
. login input[type=email]:focus::placeholder,
. login input[type=password]:focus::placeholder {
	opacity: 0;
    visibility: hidden;
}
. login p {
	overflow: hidden;
}
. login p label {
	float: left;
    cursor: pointer;
}
. login p a {
	float: right;
}
. login p a:hover {
	text-decoration: underline;
}
.login button {
	background-color:#2991b1;
	width:300px;
    color: #fff;
    padding: 10px;
    border:none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 24px;
}
. login button:hover {
	background-color: #2c778e;
}
. login input[type=email]:hover,
. login input[type=password]:hover {
	border: 1px solid dodgerblue;
    box-shadow: 0 0 5px dodgerblue;
}
. login input[type=email] {
	background: #fff url(images/icon-email.png) no-repeat center left 10px;
}
. login input[type=password] {
	background: #fff url(images/icon-lock.png) no-repeat center left 10px;
}