Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7127308

Browse files
committed
fix: 17
1 parent377e675 commit7127308

File tree

1 file changed

+87
-71
lines changed

1 file changed

+87
-71
lines changed

‎17.material 文本框/index.html‎

Lines changed: 87 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,102 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<title>Document</title>
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
312

4-
<head>
5-
<metacharset="UTF-8">
6-
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7-
<metaname="viewport"content="width=device-width, initial-scale=1.0">
8-
<title>Document</title>
9-
<style>
10-
* {
11-
box-sizing: border-box;
12-
}
13-
14-
body {
15-
background:#eee;
16-
font-family:"Roboto", sans-serif;
17-
}
13+
body {
14+
background:#eee;
15+
font-family:'Roboto', sans-serif;
16+
}
1817

19-
.form-item {
20-
position: relative;
21-
margin:45px0;
22-
display: flex;
23-
flex-direction: column;
24-
align-items: center;
25-
}
18+
.form-item {
19+
position: relative;
20+
margin:45px0;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
}
2625

27-
.form-iteminput {
28-
width:100%;
29-
height:40px;
30-
/* 去掉四周的边框 */
31-
border: none;
32-
outline: none;
33-
font-size:18px;
34-
color:#666;
35-
}
26+
.form-iteminput {
27+
width:100%;
28+
height:40px;
29+
/* 去掉四周的边框 */
30+
border: none;
31+
outline: none;
32+
font-size:18px;
33+
color:#666;
34+
}
3635

37-
/* 给 label 绝对定位 */
38-
.form-itemlabel {
39-
position: absolute;
40-
top:50%;
41-
transform:translate(0,-50%);
42-
left:10px;
43-
font-size:18px;
44-
color:#999;
45-
transition: all0.3s ease-in-out;
46-
cursor: text;
47-
}
36+
/* 给 label 绝对定位 */
37+
.form-itemlabel {
38+
position: absolute;
39+
top:50%;
40+
transform:translate(0,-50%);
41+
left:10px;
42+
font-size:18px;
43+
color:#999;
44+
transition: all0.3s ease-in-out;
45+
cursor: text;
46+
}
4847

49-
.form-item .bar {
50-
width:100%;
51-
height:2px;
52-
background:#ffffff;
53-
transition: all0.3s ease-in-out;
54-
}
48+
.form-item .bar {
49+
width:100%;
50+
height:2px;
51+
background:#ffffff;
52+
transition: all0.3s ease-in-out;
53+
}
5554

56-
.form-iteminput:focus~.bar {
57-
background-color: black;
58-
animation: show0.3s ease-in-out forwards;
59-
}
55+
.form-iteminput:focus~.bar {
56+
background-color: black;
57+
animation: show0.3s ease-in-out forwards;
58+
}
6059

61-
.form-iteminput:focus~label {
62-
top:-50%;
63-
left:0;
64-
}
60+
.form-iteminput:focus~label {
61+
top:-50%;
62+
left:0;
63+
}
6564

66-
@keyframes show {
67-
0% {
68-
width:0;
65+
.form-iteminput.has-value~label {
66+
top:-50%;
67+
left:0;
6968
}
7069

71-
100% {
72-
width:100%;
70+
@keyframes show {
71+
0% {
72+
width:0;
73+
}
74+
75+
100% {
76+
width:100%;
77+
}
7378
}
74-
}
75-
</style>
76-
</head>
79+
</style>
80+
</head>
81+
82+
<body>
83+
<divclass="form-item">
84+
<inputtype="text"id="username"/>
85+
<divclass="bar"></div>
86+
<labelfor="username">User Name</label>
87+
</div>
88+
<script>
89+
constinput=document.getElementById('username')
7790

78-
<body>
79-
<divclass="form-item">
80-
<inputtype="text"id="username">
81-
<divclass="bar"></div>
82-
<labelfor="username">User Name</label>
83-
</div>
84-
</body>
91+
input.addEventListener('focus',()=>{
92+
input.classList.remove('has-value')
93+
})
8594

86-
</html>
95+
input.addEventListener('blur',()=>{
96+
if(input.value.trim()!==''){
97+
input.classList.add('has-value')
98+
}
99+
})
100+
</script>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp