Font color in placeholder [duplicate]

Question

Font color in placeholder [duplicate]

Navigation

#1 by (2 votes)
#2 by (2 votes)

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

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 input is not accepting correctly the font color that I reported, in case color: # 898989! important; . I would like to know if I have the color of the font for the placeholder that contains input .

Something like this example:

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

css

asked by anonymous 09.12.2014 / 16:28

2 answers

2

From version 3.4 of SASS you can do this using this mix:

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

How to 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's useful.

09.12.2014 / 17:31

Error function not defined Error "1146 table 'phpmyadmin.pma__tracking does not exist"

score 2 · Accepted Answer

You need to use the specific% selectors of 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>