• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Forms</title>
7
    <style>
8
        input {
9
            width: 100%;
10
            padding: 10px 20px;
11
            margin: 5px 0;
12
            box-sizing: border-box;
13
        }
14
        input[type="text"] {
15
            border: solid 2px #FFE4B5;
16
            -webkit-transition: 0.5s;
17
            transition: 0.5s;
18
            outline: none;
19
        }
20
        input[type="text"]:focus { border: solid 2px #D2691E; }
21
        input[type="password"] { border: solid 1px black; }
22
        input[type="password"]:focus { background-color: #E0FFFF; }
23
    </style>
24
</head>
25
​
26
<body>
27
​
28
    <h1>포커스가 있는 input 요소의 스타일 설정</h1>
29
    <form>
30
        사용자 : <br>
31
        <input type="text" name="username"><br>
32
        비밀번호 : <br>
33
        <input type="password" name="password">
34
    </form>
35
​
36
</body>
37
​
38
</html>