2

Tenho um formulário com o seguinte HTML:

<div class="cont960 trabalheConosco">
    <form>
        <input type="text" placeholder="nome*" />
        <input type="text" placeholder="e-mail*" />
        <input type="text" placeholder="Telefone" />
    </form>
</div>

O CSS:

.trabalheConosco input, div .trabalheConoscoAnexo  {
    width: 480px;
    padding: 17px;
    box-sizing: border-box;
    display: block;
    background-color: #e9e9e9;
    margin-bottom: 8px;
    font: 300 italic 18px/18px "Lato";
    color: #898989!important;
}

O Jquery:

function add() {if($(this).val() == ''){$(this).val($(this).attr('placeholder')).addClass('placeholder');}}
    function remove() {if($(this).val() == $(this).attr('placeholder')){$(this).val('').removeClass('placeholder');}}
    if (!('placeholder' in $('<input>')[0])) { 
        $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); 
        $('form').submit(function(){$(this).find('input[placeholder], textarea[placeholder]').each(remove);}); 
    }

O que acontece, é que a palavra dentro do input não está aceitando corretamente a cor da fonte que eu informei, no caso color: #898989!important;. Gostaria de saber se tem como eu informar a cor da font para o placeholder que contem no input.

Algo como esse exemplo:

.trabalheConosco input[placeholder] {
    color:    #898989;
}
0

2 Respostas 2

2

Você precisa usar os seletores -place-holder específicos de cada tipo de browser para funcionar:

.teste::-webkit-input-placeholder { /* WebKit browsers */
    color:    red;
}
.teste:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
   opacity:  1;
}
.teste::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
   opacity:  1;
}
.teste:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    red;
}

.teste2::-webkit-input-placeholder { /* WebKit browsers */
    color:    blue;
}
.teste2:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    blue;
   opacity:  1;
}
.teste2::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    blue;
   opacity:  1;
}
.teste2:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    blue;
}
<div class="cont960 trabalheConosco">
<form>
    <input class="teste" type="text" placeholder="nome*" />
    <input class="teste2" type="text" placeholder="e-mail*" />
    <input type="text" placeholder="Telefone" />
</form>
</div>

4
  • Tipo .trabalheConosco::-webkit-input-placeholder{blablabla}? Commented 9/12/2014 às 15:34
  • 1
    Adaptei a resposta pro seu exemplo.
    – Franchesco
    Commented 9/12/2014 às 15:36
  • Show de bola, mas isso é geral né? gostaria de ter uma cor em um placeholder especifico. Commented 9/12/2014 às 15:37
  • 1
    Basta especificar a classe ou id do input específico. Modifiquei a resposta...
    – Franchesco
    Commented 9/12/2014 às 15:41
2

A partir da versão 3.4 do SASS você pode fazer dessa maneira usando esse mixin:

@mixin optional-at-root($sel) {
   @at-root #{if(not &, $sel, selector-append(&, $sel))} {
      @content;
   }
}

@mixin placeholder {
   @include optional-at-root('::-webkit-input-placeholder') {
      @content;
   }

   @include optional-at-root(':-moz-placeholder') {
      @content;
   }

   @include optional-at-root('::-moz-placeholder') {
      @content;
   }

   @include optional-at-root(':-ms-input-placeholder') {
      @content;
   }
}

Modo de usar:

.foo {
  @include placeholder {
    color: green;
  }
}

ou

@include placeholder {
  color: red;
}

E o output é esse:

.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

Espero que seja útil.

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