写一个css样式美化一下用户添加页面,添加信息有姓名,密码和状态
时间: 2024-03-14 09:45:03 浏览: 26
好的,下面是一个简单的 CSS 样式,可以美化用户添加页面中的姓名、密码和状态输入框:
```css
/* 输入框样式 */
input[type=text], input[type=password], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* 状态下拉框样式 */
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* 提交按钮样式 */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
```
将上述样式添加到你的 CSS 文件中,然后将 HTML 中的输入框和按钮添加相应的 class,例如:
```html
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name" class="input-box">
<label for="password">密码</label>
<input type="password" id="password" name="password" class="input-box">
<label for="status">状态</label>
<select id="status" name="status" class="select-box">
<option value="active">激活</option>
<option value="inactive">未激活</option>
</select>
<input type="submit" value="提交" class="submit-button">
</form>
```
这样,输入框和按钮就会按照上述 CSS 样式进行美化了。