表单

CSS深入浅出之表单美化

Posted by weite122 on 2018-02-25

百度搜索框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//at.alicdn.com/t/font_508082_xiduzmltis7wg66r.js"></script>
  <style>
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  display: flex;
}
.inputContainer {
  position: relative;
}
.inputContainer input[type=text] {
  font-size: 16px;
  padding-left: 8px;
  border: 1px solid #b8b8b8;
  width: 540px;
  height: 35px;
  line-height: 35px;
}
.inputContainer input[type=text]:focus {
  outline: none;
  border-color: #4b94fc;
}
.suggestion {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #b8b8b8;
  border-top: none;
}
.suggestion.active {
  display: block;
}
.suggestion > li {
  font-size: 14px;
  padding-left: 8px;
}
.suggestion > li:hover {
  background-color: #F0F0F0;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.iconWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 8px;
}
.iconWrapper svg.icon {
  width: 20px;
  height: 20px;
  fill: #b8b8b8;
}
.iconWrapper svg.icon:hover {
  fill: #4b94fc;
  cursor: pointer;
}
.splitLine {
  width: 0;
  height: 14px;
  border-left: 1px solid;
  margin: 0 10px;
  color: #b8b8b8;
}
.inputContainer + button {
  padding: 0 20px;
  color: #fff;
  background-color: #3988FB;
  border: none;
}
.inputContainer + button:focus {
  outline: none;
}
.inputContainer + button:hover {
  cursor: pointer;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
  background: #3781F0;
}
  </style>
</head>
<body>
<div class="wrapper">
  <span class="inputContainer">
    <input id="keyword" type="text" autocomplete="off">
    <span class="iconWrapper">
        <svg class="icon">
          <use xlink:href="#icon-microphoneicon"></use>
        </svg>
        <span class="splitLine"></span>
    <svg class="icon">
      <use xlink:href="#icon-camera"></use>
    </svg>
    </span>
      <ul id="suggestion" class="suggestion">
    <li>搜索结果1</li>
    <li>搜索结果2</li>
    <li>搜索结果3</li>
    <li>搜索结果4</li>
  </ul>
  </span>
  <button>百度一下</button>
</div>
<script>
  keyword.oninput = function(e) {
    if(keyword.value){
      suggestion.classList.add('active')
    }else{
      suggestion.classList.remove('active')
    }
  }
</script>
</body>
</html>

点击上传图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .wrapper {
        width: 150px;
        height: 150px;
        margin: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
      }
      .wrapper:hover {
        cursor: pointer;
      }
      .wrapper img {
        max-width: 100%;
        height: 100%;
      }
      #imageInput {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
      }
      .wrapper .upload {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.5);
        color: white;
      }
      .wrapper:hover .upload {
        display: flex;
      }

  </style>
</head>
<body>
<div class="wrapper">
  <img src="https://i.loli.net/2018/03/01/5a979cd405a66.jpg" >
  <div class="upload">点我上传</div>
  <input id="imageInput" type="file">
</div>
<script>
  imageInput.onchange = function(e) {
    e.target.value = ''
  }/*每次上传后重置*/
</script>
</body>
</html>

涟漪效果按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .circleBtn{
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    background:#fff;
    border:none;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    transition: all .5s;
    border-radius: 2px;
    z-index: 0;
  }
  .circleBtn:hover {
    background:#E5E5E5;
  }
  .circleBtn:focus {
    outline: none;
    background:#E5E5E5;
  }
  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display:inline-block;
    width: 10px;
    height: 10px;
    background: #aaa;
    transition: transform .5s;
    visibility: hidden;
    z-index: -1;
    pointer-events: none; /*display:none没有动画效果*/
  }
  .circleBtn >.circle.active {
    transform: scale(15);
    visibility:visible;
  }
  </style> 
</head>
<body>
<button id="btn" class="circleBtn">
  <span class="circle">
  </span>
      button
</button>
<script>
  btn.onclick = function() {
  btn.querySelector('.circle').classList.add('active')
}
  btn.querySelector('.circle').addEventListener('transitionend', function() {
    btn.querySelector('.circle').classList.remove('active')
  })


</script>
</body>
</html>
FEATURED TAGS
表单
FRIENDS