css - 在同一页面上使用不同的表单控件样式 Bootstrap CSS

Question

有没有办法让表单中的占位符文本在一个部分为白色，在另一个部分为灰色？

哈姆:

注册表单 1:

= form_tag splash_signup_path, role: :form, :class=>'form-horizontal',         :remote=>true do
      .col-sm-12
        .input-group
          = text_field_tag :signup_email, '',  :class=>'form-control', :placeholder=>'Enter your email address to receive the lastest updates'
          %span.input-group-btn
           = submit_tag 'Submit', :class=>'btn btn-default'

注册表单 2:

= form_tag splash_signup_path, role: :form, :class=>'form-horizontal',         :remote=>true do
      .col-sm-12
        .input-group
          = text_field_tag :signup_email, '',  :class=>'form-control', :placeholder=>'Enter your email address to receive the lastest updates'
          %span.input-group-btn
           = submit_tag 'Submit', :class=>'btn btn-default'

CSS:

.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }

.signup {
  margin-top: 70px;
  margin-bottom: 5px;
  position: absolute;
  bottom: 20px;
}

.signup-bottom {
  top: 20px;
  margin-bottom: 20px;
}

编辑:为清楚起见删除了不相关的代码

Answer 1

这行得通吗？

.signup .form-control::-webkit-input-placeholder { color: white; }
.signup .form-control:-moz-placeholder { color: white; }
.signup .form-control::-moz-placeholder { color: white; }
.signup .form-control:-ms-input-placeholder { color: white; }

.signup-bottom .form-control::-webkit-input-placeholder { color: grey; }
.signup-bottom .form-control:-moz-placeholder { color: grey; }
.signup-bottom .form-control::-moz-placeholder { color: grey; }
.signup-bottom .form-control:-ms-input-placeholder { color: grey; }