精美form表单css样式
时间: 2023-10-03 19:05:49 浏览: 40
以下是一个简单的表单 CSS 样式,你可以根据自己的需求进行修改:
```css
/* 表单样式 */
form {
padding: 20px;
background: #f2f2f2;
max-width: 600px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"],
input[type="password"],
select {
padding: 12px 20px;
border: none;
border-radius: 4px;
background-color: #fff;
font-size: 16px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
input[type="checkbox"] {
margin-top: 8px;
}
.error {
color: red;
font-size: 14px;
margin-top: 8px;
}
```
这只是一个基本的样式,你可以添加更多的样式来使表单更漂亮和易于使用。