简洁form表单css样式
时间: 2023-12-19 19:05:26 浏览: 122
简单漂亮的表格样式
3星 · 编辑精心推荐
以下是一个简单的表单样式:
```css
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
textarea {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0062cc;
}
```
这个样式使用了 flexbox 布局来垂直居中表单,使用了 border-radius 和 box-shadow 属性来美化文本框,使用了 hover 伪类来添加鼠标悬停效果。
阅读全文