0

Olá, estou com um probleminha ao adicionar uma caixa de email no meu blog, aquelas que cadastra para o usuário receber atualizações por email. Eu coloco a cor da font branca mas nn faz efeito, mesmo adicionando "!important".

aqui está a imagem

inserir a descrição da imagem aqui

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

2 Respostas 2

2

Opa, eai. Pelo que vi você tentando mudar a cor do texto, mas no caso o que voce precisa mudar é a cor do placeholder e para isso adicione essa linha como fiz aqui. E espero ter ajudado!!!

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

4
  • Não entendi o por quê do negativo... Parece funcionar...
    – MagicHat
    Commented 4/12/2016 às 16:07
  • Segue uma referencia tableless.com.br/estilizar-e-formatar-placeholder-de-inputs
    – LocalHost
    Commented 4/12/2016 às 16:27
  • Eu fiz isso e teve um pequeno bug que foi criar uma margin automaticamente. Consegui resolver o problema assim: #email-subscribe input.email-field, #email-subscribe input::-webkit-input-placeholder{color:#fff;margin-top:0px;} Muuito obrigado amigo <3 xeruh kkjj Commented 4/12/2016 às 17:38
  • agora eu gostaria de saber como eu faço para que ao clicar na caixa, o nome "Digite seu e-mail aqui" some, e quando clicado em outra coisa fora da caixa, as palavras voltem pro lugar. Commented 4/12/2016 às 17:49
0

Acho que oque você quer e mudar a cor do placeholder, com color: #fff; no placeholder deve resolver

1
  • Opa, já consegui arrumar o erro. Obrigado :) :D Commented 4/12/2016 às 17:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .