使用 sass 定位占位符文本

Question

所以我为一个网站设计了一个平面注册表单来学习前端开发。我使用 Mailchimp 作为表单，这一切似乎都有效。现在我已经按照预期的方式设计了所有内容，但是我无法让这个占位符文本具有正常的不透明度。对我来说，它的不透明度似乎低于'1'，或者它没有完全显示'white'。

我尝试了一些方法，但没有任何效果； "Opacity 1" 并尝试 select 占位符与其他帖子中提到的供应商修复。我还尝试想出一个 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 使用伪class：:-moz-placeholder

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

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

浏览器 <=IE9 & <=Opera12，不支持 CSS 占位符选择器（不足为奇！）

//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 有帮助。

Also check if the ::-webkit-input-placeholder is getting overridden by any other files like normalize.scss etc.

使用 sass 定位占位符文本

Targeting placeholder text using sass

html

css

forms

placeholder