html输入框美化
时间: 2023-07-01 18:13:41 浏览: 180
制作漂亮的输入框
可以通过CSS样式来美化HTML输入框,以下是一些基本的CSS样式可以应用于输入框:
1. 修改输入框的边框样式:
```css
input {
border: 2px solid #ccc;
border-radius: 5px;
}
```
2. 修改输入框的背景颜色和字体颜色:
```css
input {
background-color: #f5f5f5;
color: #333;
}
```
3. 修改输入框的尺寸和内边距:
```css
input {
width: 300px;
height: 40px;
padding: 10px;
}
```
4. 修改输入框的阴影效果:
```css
input {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
```
5. 修改输入框的鼠标悬停状态:
```css
input:hover {
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
```
以上是一些基本的CSS样式可以应用于输入框,你可以根据自己的需求进行修改和调整。
阅读全文