html的input美化
时间: 2023-08-08 08:09:32 浏览: 53
可以使用CSS来美化HTML的input元素。以下是一些常用的方法:
1. 修改input的背景颜色和边框样式:
```css
input {
background-color: #f3f3f3;
border: none;
border-radius: 5px;
padding: 10px;
}
```
2. 添加阴影效果:
```css
input {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
```
3. 修改input的hover和focus状态样式:
```css
input:hover, input:focus {
border: 2px solid #e67e22;
outline: none;
}
```
4. 添加图标:
```html
<div class="input-wrapper">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</div>
```
```css
.input-wrapper {
position: relative;
}
.input-wrapper input {
padding-left: 30px;
}
.input-wrapper i {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
font-size: 18px;
color: #ccc;
}
```
以上仅是一些例子,具体的美化效果可以根据自己的需要进行调整。