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，谷歌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。

浏览器＆lt; = IE9＆amp; ＆lt; = 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等其他任何文件覆盖。

使用sass定位占位符文本

1 个答案: