修改输入框复选框的样式
时间: 2023-10-08 20:06:31 浏览: 47
要修改输入框和复选框的样式,你可以使用CSS来实现。下面是一个简单的例子:
HTML代码:
```html
<label for="input-username">用户名:</label>
<input type="text" id="input-username">
<label for="input-password">密码:</label>
<input type="password" id="input-password">
<label for="input-checkbox">复选框:</label>
<input type="checkbox" id="input-checkbox">
```
CSS代码:
```css
/* 修改输入框样式 */
input[type="text"],
input[type="password"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
}
/* 修改复选框样式 */
input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 10px;
vertical-align: middle;
position: relative;
top: 2px;
}
input[type="checkbox"]:checked:before {
content: "\2714";
display: block;
position: absolute;
top: -4px;
left: 2px;
font-size: 20px;
color: #fff;
}
```
这段CSS代码将输入框的边框改为灰色,圆角为5px,字体大小为16px,颜色为黑色。复选框的大小为20px,选择时会出现一个对勾,并且背景色会变为蓝色。
你可以根据需要自行修改CSS代码,实现不同的样式效果。