html的input美化
时间: 2023-08-08 17:10:05 浏览: 106
可以通过CSS对HTML中的input元素进行美化。以下是几种常用的美化方式:
1. 修改输入框的边框、背景色等样式:
```css
input[type="text"], input[type="password"], textarea {
border: none;
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
border-radius: 5px;
}
```
2. 修改输入框的聚焦效果:
```css
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
outline: none;
box-shadow: 0 0 5px #2196f3;
}
```
3. 修改输入框的placeholder样式:
```css
::-webkit-input-placeholder {
color: #999;
}
:-moz-placeholder {
color: #999;
}
::-moz-placeholder {
color: #999;
}
:-ms-input-placeholder {
color: #999;
}
```
4. 自定义复选框/单选框:
```css
/* 隐藏原生的复选框/单选框 */
input[type="checkbox"], input[type="radio"] {
display: none;
}
/* 自定义样式 */
.checkbox, .radio {
display: inline-block;
cursor: pointer;
margin-right: 10px;
position: relative;
padding-left: 25px;
font-size: 16px;
}
.checkbox:before, .radio:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #999;
position: absolute;
left: 0;
top: 1px;
background-color: #fff;
}
.checkbox:checked:before, .radio:checked:before {
content: "\2713";
color: #2196f3;
text-align: center;
font-size: 14px;
line-height: 18px;
}
```
以上是一些常见的输入框美化方法,可以根据实际需要进行调整。