如何设置表单组背景颜色

Question

我想在form-group上设置背景颜色。为了澄清我的意思，请看下面的图片 正如你在上面看到我用颜色标记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

您的service=elasticsearch if (( $(ps -ef | grep -v grep | grep $service | wc -l) > 0 )) then echo "$service is running!!!" else echo "$service is not running!!!" fi 占据与其中.form-group完全相同的高度，因此您添加到其中的每种背景颜色实际上都隐藏在输入后面。

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

input

Answer 2

您的CSS不正确，应该是：

.portfolio-item form .form-buffer.form-group {
margin: 30px 0px;
background-color: #006dcc;
}

这将选择整个.form-group。你的错误是将CSS规则嵌套在另一个中。

Here is a fiddle of it

Answer 3

听起来很奇怪.. !!但它不会像您在padding-bottom: XXpx所选择的form-group中应用background-color而不仅仅应用padding-bottom一样，然后它适用于您在#!/usr/bin/perl use warnings; use strict; my $two_days = 48 * 60 * 60; while (<>) { my @data = split; if ($data[1] == 0 and $data[2] == 1 and $data[6] < (time - $two_days)) { print "$data[0] $data[3] $data[5] " . localtime($data[6]) . "\n"; } } 中应用的长度}。