html - propriedades - style type color




Alterar a cor do marcador de posição de uma entrada HTML5 com CSS (20)

O Chrome suporta o atributo de marcador de posição nos elementos input[type=text] (outros provavelmente também o fazem).

Mas o seguinte CSS não faz nada ao valor do placeholder:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value ainda permanecerá grey vez de red .

Existe uma maneira de alterar a cor do texto do espaço reservado?


Implementação

Existem três implementações diferentes: pseudo-elementos, pseudo-classes e nada.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft Edge estão usando um pseudoelemento: ::-webkit-input-placeholder . [ Ref ]
  • O Mozilla Firefox 4 a 18 está usando uma pseudo-classe :-moz-placeholder ( um ponto-e - vírgula). [ Ref ]
  • O Mozilla Firefox 19+ está usando um pseudoelemento: ::-moz-placeholder , mas o antigo seletor ainda funcionará por um tempo. [ Ref ]
  • O Internet Explorer 10 e 11 estão usando uma pseudo-classe :-ms-input-placeholder . [ Ref ]
  • Abril de 2017: A maioria dos navegadores modernos suporta o pseudo-elemento simples ::placeholder [ Ref ]

O Internet Explorer 9 e inferior não suporta o atributo de placeholder , enquanto o Opera 12 e inferior não suportam nenhum seletor de CSS para espaços reservados.

A discussão sobre a melhor implementação ainda está em andamento. Observe que os pseudo-elementos atuam como elementos reais no DOM da Sombra . Um padding em uma input não obterá a mesma cor de fundo que o pseudoelemento.

Seletores CSS

Os agentes do usuário são obrigados a ignorar uma regra com um seletor desconhecido. Veja Seletores de Nível 3 :

um group de seletores contendo um seletor inválido é inválido.

Então, precisamos de regras separadas para cada navegador. Caso contrário, todo o grupo seria ignorado por todos os navegadores.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Notas de uso

  • Tenha cuidado para evitar contrastes ruins. O espaço reservado do Firefox parece estar com uma opacidade reduzida, portanto, é necessário usar a opacity: 1 aqui.
  • Observe que o texto de espaço reservado é cortado apenas se não couber - dimensione seus elementos de entrada e teste-os com grandes configurações mínimas de tamanho de fonte. Não se esqueça de traduções: algumas línguas precisam de mais espaço para a mesma palavra.
  • Navegadores com suporte a HTML para placeholder mas sem suporte a CSS para isso (como o Opera), também devem ser testados.
  • Alguns navegadores usam CSS padrão adicional para alguns tipos de input ( email , search ). Isso pode afetar a renderização de formas inesperadas. Use as properties -webkit-appearance e -moz-appearance para mudar isso. Exemplo:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

A maneira mais fácil seria:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Adicionando uma possibilidade real muito simples e simples: filtros css !

Ele vai estilizar tudo, incluindo o espaço reservado.

O seguinte definirá as duas entradas na mesma paleta, usando o filtro de matiz para alteração de cor. Ele renderiza muito bem agora em navegadores (exceto ie ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Para permitir que os usuários o alterem dinamicamente, usando uma cor de tipo de entrada para alterações ou para encontrar nuances, confira este snippet:

De: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css filtra documentos: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


Agora, temos uma maneira padrão de aplicar o CSS a um espaço reservado de entrada: ::placeholder pseudo-elemento de ::placeholder this Rascunho de Nível 4 do Módulo CSS.


Aqui está mais um exemplo:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>


Este código curto e limpo:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

Eu tentei todas as combinações aqui para mudar a cor, na minha plataforma móvel e, eventualmente, foi:

-webkit-text-fill-color: red;

que fez o truque.


Isso vai funcionar bem. DEMO AQUI:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />


No Firefox e no Internet Explorer, a cor normal do texto de entrada substitui a propriedade color dos espaços reservados. Então, precisamos

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

OK, espaços reservados comportam-se diferentemente em navegadores diferentes, então você precisa usar o prefixo do navegador no CSS para torná-los idênticos, por exemplo o Firefox dá uma transparência ao espaço reservado por padrão, então adicione opacidade 1 ao seu CSS, mais a cor, não é uma grande preocupação na maioria das vezes, mas é bom tê-los consistentes:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

Para usuários SASS / SCSS usando o Bourbon , ele possui uma função interna.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Saída CSS, você também pode pegar essa parte e colar em seu código.

//main.css

input {
  width: 300px;
}

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

Para usuários do Sass :

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

Que tal agora

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
this.value='';" style="color: #f00;"/>

Sem CSS ou espaço reservado, mas você obtém a mesma funcionalidade.


Se você está usando o Bootstrap e não conseguiu fazer isso funcionar, provavelmente perdeu o fato de que o próprio Bootstrap adiciona esses seletores. Este é o Bootstrap v3.3 que estamos falando.

Se você está tentando mudar o espaço reservado dentro de uma classe CSS .form-control, então você deve sobrescrevê-lo assim:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

Use o novo ::placeholder se você usar autoprefixer .

Note que o mix do espaço reservado do Bootstrap está obsoleto em favor disso.

Exemplo:

input::placeholder { color: black; }

Ao usar o autoprefixer, o acima será convertido para o código correto para todos os navegadores.


Você pode alterar a cor do marcador de posição de uma entrada HTML5 com CSS. Se por acaso, seu conflito de CSS, esta nota de código estiver funcionando, você pode usar (! Importante) como abaixo.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Espero que isso ajude.


Você também pode querer estilizar textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

tente este código para o estilo diferente do elemento de entrada diferente

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

Exemplo 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

exemplo 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }


/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Isso irá estilizar todos os espaços reservados de input e textarea .

Nota importante: não agrupe estas regras. Em vez disso, crie uma regra separada para cada seletor (um seletor inválido em um grupo invalida todo o grupo).







html-input