HTML搜索框样式设计-优快云博客

本文介绍了一个使用HTML和CSS实现的简洁美观的搜索框设计。该搜索框具有自定义的图标和输入框，并且通过CSS样式实现了良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6 <title>搜索框</title>
 7 <style type="text/css">
 8 *{
 9 margin: 0px;
10 padding: 0px;
11 }
12 .nav{
13 width: 100%;
14 height: 100vh;
15 background: #008B8B;overflow: hidden;
16 }
17 .search{
18 width: 90%;
19 height: 40px;
20 line-height: 40px;
21 margin: 10px auto;
22 background: #fff;
23 border-radius: 20px;
24 }
25 .search_icon{
26 float: left;
27 width: 15%;
28 text-align: center;
29 }
30 .search_icon img{
31 width: 30px;
32 height: 30px;
33 vertical-align: middle;
34 }
35 .search input[type="text"]{
36 float: left;
37 width: 80%;
38 height: 30px;
39 line-height: 30px;
40 margin-top: 5px;
41 border: none;
42 outline: none;
43 box-sizing: border-box;
44 appearance: none;
45 -webkit-appearance: none;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="nav">
51 <div class="search">
52 <div class="search_icon"><img src="img/search.png"/></div>
53 <input type="text" name="" id="" value="" placeholder="搜索" />
54 </div>
55 </div>
56 </body>
57 </html>