纯css3 ui搜索框样式代码
时间: 2023-09-15 19:21:30 浏览: 51
以下是一个简单的纯CSS3搜索框样式代码:
HTML:
```html
<div class="search-box">
<input type="search" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
```
CSS:
```css
.search-box {
position: relative;
display: inline-block;
vertical-align: middle;
}
.search-box input[type="search"] {
width: 200px;
height: 30px;
padding: 5px 10px;
border: none;
border-radius: 20px;
box-shadow: inset 0 0 5px #ccc;
font-size: 16px;
}
.search-box button[type="submit"] {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}
.search-box button[type="submit"]:hover {
color: #333;
}
.search-box button[type="submit"] i {
font-size: 20px;
}
```
这个代码创建了一个包含输入框和搜索按钮的搜索框组件,输入框使用圆角边框和阴影效果来增加美感,按钮使用了一个FontAwesome图标(需要在HTML文件中引入FontAwesome库)。