html - 如何设置表单组背景颜色

Question

我想在表单组上设置背景颜色。为了阐明我的确切意思，请看下图 正如你在上面看到的，我用颜色标记了 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>

但是它不起作用，我做错了什么？

Answer 1

您的 .form-group 占用的高度与其中的 input 完全相同，因此您添加到其中的每种背景颜色实际上都隐藏在 input 后​​面。

您可以用填充替换顶部/底部边距，使 .form-group 区域实际上大于 input:

.form-group {
  padding: 30px 0;
  background-color: #006dcc;
}