Таргетинг на текст заполнителя с использованием 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 Край использует псевдо-элемент

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

Mozilla Firefox 4 до 18 использует псевдо-CLAS с: :-moz-placeholder

Mozilla Firefox 19+ используют псевдо-элемент: ::-moz-placeholder (двойной толстой кишки)

Internet Explorer, 10 и 11, используя псевдо-класс: :-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 

Надеется, что это помогло ..

Update:

Это помогло ОП.

Также проверьте, если ::-webkit-input-placeholder становится переопределен любыми другими файлами, как normalize.scss т.д.