好看的手机版 搜索框
时间: 2023-11-26 20:11:22 浏览: 16
以下是一个简单的 HTML 和 CSS 代码示例,可以创建一个漂亮的手机版搜索框:
HTML 代码:
```
<form action="/search" method="get">
<input type="text" id="search-input" name="q" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
```
CSS 代码:
```
form {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
input[type="text"] {
flex: 1;
border: none;
font-size: 16px;
padding: 8px;
border-radius: 20px;
outline: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button[type="submit"] {
background-color: #fff;
border: none;
margin: 0;
padding: 0;
font-size: 16px;
color: #666;
cursor: pointer;
outline: none;
}
button[type="submit"]:hover {
color: #333;
}
.fa-search {
font-size: 16px;
}
```
在这个示例中,使用了一个 `<form>` 元素来包含搜索框,`<input>` 元素用于创建实际的搜索框,`<button>` 元素用于提交搜索请求。CSS 代码对搜索框进行了样式设置,使其看起来更加美观。
你可以根据需要修改 CSS 代码中的颜色、字体大小和其他样式属性来适应你的网站风格。