使用 sass 定位占位符文本

Question

所以我为一个网站设计了一个平面注册表单来学习前端开发。我使用 Mailchimp 作为表单，这一切似乎都有效。现在我已经把所有的东西都设计好了，但是我不能让这个占位符文本具有正常的不透明度。对我来说，它的不透明度似乎低于“1”，或者它没有完全显示为“白色”。

我尝试了几件事，但没有任何效果； “不透明度 1”并尝试使用其他帖子中提到的供应商修复来选择占位符。我还尝试提出一个 mixin 来针对供应商修复（在之前的帖子中作为解决方案提到），但什么也没发生。

谢谢！

.newsletter-container {
  display: flex;
  height: 200px;
  background-color: #f4f4f4;
  align-items: center;
  justify-content: center;
}
.newsletter-container .newsletter-form {
  max-width: 700px;
  width: 100%;
}
.newsletter-container .newsletter-form .form-display {
  background: #f4f4f4;
  display: flex;
}
.newsletter-container .newsletter-form .form-display .mc-field-group {
  flex: 2;
}
.newsletter-container .newsletter-form .form-display input {
  background: #1d1c1c;
  border: 0;
  padding: 0;
  color: white;
  height: 50px;
  width: 100%;
  font-family: "Open Sans";
  font-size: 12px;
}
.newsletter-container .newsletter-form .form-display input[type="submit"] {
  flex: 1;
  border-left: 5px solid #f4f4f4;
  text-transform: uppercase;
}
.newsletter-container .newsletter-form .form-display input[type="text"] {
  padding-left: 10px;
}

<div class="newsletter-container">
  <div class="newsletter-form">
    <div id="mc_embed_signup">
      <form action="//facebook.us14.list-manage.com/subscribe/post?u=868cbba0c64a29c8fb08f6aef&amp;id=eda72469b9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
          
          <div class="form-display">
          
            <div class="mc-field-group">
              <label for="mce-FNAME"></label>
              <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Full Name">
            </div>
          
            <div class="mc-field-group">
              <label for="mce-EMAIL"></label>
              <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Adress">
            </div>      
            
            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
          </div>
          
          <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
          </div>    
      
          <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_868cbba0c64a29c8fb08f6aef_eda72469b9" tabindex="-1" value=""></div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

都是正确的，除了需要针对不同的浏览器专门更改输入占位符的颜色，试试：

WebKit、Blink（Safari、Google Chrome、Opera 15+）和 Microsoft Edge 正在使用伪元素

::-webkit-input-placeholder {
    color: white;
}

Mozilla Firefox 4 到 18 正在使用伪类：:-moz-placeholder

Mozilla Firefox 19+ 正在使用伪元素：::-moz-placeholder（双冒号）

Internet Explorer 10 和 11 使用伪类：:-ms-input-placeholder。

浏览器 这并不奇怪！）

//affects all input placeholders across webkit browsers
::-webkit-input-placeholder {
    color: white;
}
//affects all input placeholders across webkit browsers

//no change in any of your other styles
.newsletter-container {
  display: flex;
  height: 200px;
  background-color: #f4f4f4;
  align-items: center;
  justify-content: center;
}
//no change in any of your other styles

希望这有帮助..

更新：

这对 OP 有帮助。

同时检查::-webkit-input-placeholder 是否被normalize.scss 等任何其他文件覆盖。