CODEWITHSUNDEEP
htmlcssformsplaceholder
Rik de Cort
Rik de Cort

Reputation: 39

Targeting placeholder text using sass

So I designed a flat signup form for a website to learn front-end developing. I used Mailchimp for the form, and this all seems to work. Now I have styled up everything how it supposed to be, however I cannot get this placeholder text to have a normal opacity. To me, it seems its opacity is lower than '1', or it does not show up completely 'white'.

I have tried a couple of things, but nothing works; "Opacity 1" and trying to select the placeholder with the vendor fixes mentioned in other posts. I also tried to come up with a mixin to target the vendor fixes (mentioned as a solution in previous posts), but nothing happened.

Thanks! 

.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>

Upvotes: 1

Views: 4439

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6652

All are correct, except you need to specifically change the color of the input placeholder for different browsers, try:

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element

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

Mozilla Firefox 4 to 18 are using a pseudo-class: :-moz-placeholder

Mozilla Firefox 19+ are using a pseudo-element: ::-moz-placeholder (double colon)

Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder.

Browsers <=IE9 & <=Opera12, does not support CSS selectors for placeholders (no surprise there!)

//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

Hope this helped..

Update:

This helped the OP.

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

Upvotes: 1

Related Questions