使用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。

浏览器<= ie &<=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。

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