Problems with css email registration box

Question

Hello, I have a little problem adding an email box on my blog, the ones that sign up for the user to receive email updates. I put the color of the white font but nn makes effect even adding "! Mportant".

here is the image

/* CSS EMAIL SUBSCRIBE */
#email-subscribe {padding:20px;background:#4dbfd9;}
#email-subscribe h4.title {font-size:16px;color:#FFFFFF;font-weight:400;line-height:1;text-align:center;text-transform:uppercase;margin-bottom:0;}
#email-subscribe h4.title span {display:inline-block;font-weight:700;font-size:30px;margin-top:15px;}
#email-subscribe input.email-field {color:#fff;background:#4dbfd9;margin-top:0px;}
#email-subscribe input {color:#fff;border:1px solid rgba(255,255,255,.4);width:100%;text-align:center;-moz-box-sizing:border-box;box-sizing:border-box;padding:0.662em 1.247em;margin:0;box-shadow:none;outline:0;border-radius:2px;font-size:14px;line-height:19px;}
#email-subscribe input.submit {background:#4dbfd9;color:#fff;margin-top:20px;font-size:14px;font-weight:300;cursor:pointer;transition:all .3s;}
#email-subscribe input.submit:hover {background:#fff;color:#4dbfd9!important}

<div class="email-subscribe" id="email-subscribe">
<h4 class="title">Receba Atualizações<br /> <span>EM SEU EMAIL</span></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/vYnG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1">
<input class="email-field" type="text" value="" placeholder="digite seu e-mail aqui" name="email" />
<input type="hidden" value="blogspot/vYnG" name="uri" /><input type="hidden" name="loc" value="pt_BR" />
<input class="submit" name="submit" type="submit" value="Cadastre-se agora" />
</form>
<div class="clear"></div></div>

Answer 1

Whoa, whoa, whoa, whoa. From what I saw you trying to change the color of the text, but in this case what you need to change is the color of the placeholder and for that add this line as I did here. And I hope I’ve helped!!!

 #email-subscribe input::-webkit-input-placeholder { 
   color: #fff;

}

/* CSS EMAIL SUBSCRIBE */
#email-subscribe {padding:20px;background:#4dbfd9;}
#email-subscribe h4.title {font-size:16px;color:#FFFFFF;font-weight:400;line-height:1;text-align:center;text-transform:uppercase;margin-bottom:0;}
#email-subscribe h4.title span {display:inline-block;font-weight:700;font-size:30px;margin-top:15px;}
#email-subscribe input.email-field {color:#fff;background:#4dbfd9;margin-top:0px;}
#email-subscribe input {color:#fff;border:1px solid rgba(255,255,255,.4);width:100%;text-align:center;-moz-box-sizing:border-box;box-sizing:border-box;padding:0.662em 1.247em;margin:0;box-shadow:none;outline:0;border-radius:2px;font-size:14px;line-height:19px;}
#email-subscribe input.submit {background:#4dbfd9;color:#fff;margin-top:20px;font-size:14px;font-weight:300;cursor:pointer;transition:all .3s;}
#email-subscribe input.submit:hover {background:#fff;color:#4dbfd9!important}
 #email-subscribe input::-webkit-input-placeholder { 
   color: #fff;
  
}

<div class="email-subscribe" id="email-subscribe">
<h4 class="title">Receba Atualizações<br /> <span>EM SEU EMAIL</span></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/vYnG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1">
<input class="email-field" type="text" value="" placeholder="digite seu e-mail aqui" name="email" />
<input type="hidden" value="blogspot/vYnG" name="uri" /><input type="hidden" name="loc" value="pt_BR" />
<input class="submit" name="submit" type="submit" value="Cadastre-se agora" />
</form>
<div class="clear"></div></div>

Answer 2

I think what you want is to change the color of the placeholder, with color: #fff; in the placeholder should resolve