我想在表单组上设置背景颜色。为了阐明我的确切意思,请看下图 正如你在上面看到的,我用颜色标记了 div,我想从 form-group 设置背景颜色。
我尝试使用以下 css。
.signup-ctrl {
//margin-top: 60px;
.form-buffer {
margin: 30px 0px;
background-color: #006dcc;
}
}
和html
<div class="col-md-5 portfolio-item">
<form>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="name" placeholder="Enter your name">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="email" placeholder="Enter your email">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="emailconfirm" placeholder="Enter email confirmation">
</div>
<div class="form-group form-buffer">
<input type="password" class="form-control" name="password" placeholder="Enter your Password">
</div>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="captcha" placeholder="Enter numbers from image">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
但是它不起作用,我做错了什么?
最佳答案
您的 .form-group
占用的高度与其中的 input
完全相同,因此您添加到其中的每种背景颜色实际上都隐藏在 input 后面。
您可以用填充替换顶部/底部边距,使 .form-group
区域实际上大于 input
:
.form-group {
padding: 30px 0;
background-color: #006dcc;
}
关于html - 如何设置表单组背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28397023/