Font color in placeholder

Asked

Viewed 1,913 times

2

I have a form with the following HTML:

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

THE 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;
}

The 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);}); 
    }

What happens is that the word inside the input is not correctly accepting the color of the font I informed, in case color: #898989! Import;. I wonder if it has how I inform font color for placeholder containing on input.

Something like this example:

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

2 answers

2


You need to use the selectors -place-holder specific to each type of browser to work:

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

  • Type .trabalheConosco::-webkit-input-placeholder{blablabla}?

  • 1

    I adapted the answer to your example.

  • Ball show but this is general right? would like to have a color in a placeholder specific.

  • 1

    Just specify the specific input class or id. I modified the response...

2

From version 3.4 of SASS you can do this way using this 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;
   }
}

Mode of use:

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

or

@include placeholder {
  color: red;
}

And the output is this:

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

I hope it will be useful.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.