在同一页面上改变表单控件样式 Bootstrap CSS答案

【问题标题】：Varying form-control styles on the same page Bootstrap CSS在同一页面上改变表单控件样式 Bootstrap CSS
【发布时间】：2023-03-09 16:28:01
【问题描述】：

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

HAML：

注册表单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;
}

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

【问题讨论】：

标签： css ruby-on-rails forms twitter-bootstrap haml

【解决方案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; }

【讨论】：