Domanda Modifica il colore del segnaposto di un input HTML5 con i CSS


Chrome supporta il attributo segnaposto sopra input[type=text] elementi (probabilmente anche altri).

Ma il seguente CSS non fa nulla al valore del segnaposto:

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

Value rimarrà ancora grey invece di red.

C'è un modo per cambiare il colore del testo segnaposto?


3593
2018-04-09 20:36


origine


risposte:


Implementazione

Esistono tre diverse implementazioni: pseudo-elementi, pseudo-classi e niente.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft Edge utilizzano uno pseudo-elemento: ::-webkit-input-placeholder. [arbitro]
  • Mozilla Firefox da 4 a 18 utilizza una pseudo-classe: :-moz-placeholder (uno colon). [arbitro]
  • Mozilla Firefox 19+ utilizza uno pseudo-elemento: ::-moz-placeholder, ma il vecchio selettore continuerà a funzionare ancora per un po '. [arbitro]
  • Internet Explorer 10 e 11 utilizzano una pseudo-classe: :-ms-input-placeholder. [arbitro]
  • Aprile 2017: La maggior parte dei browser moderni supporta lo pseudo-elemento semplice ::placeholder  [arbitro]

Internet Explorer 9 e versioni precedenti non supportano il placeholder attributo a tutti, mentre Opera 12 e versioni precedenti non supportano qualsiasi selettore CSS per segnaposto.

La discussione sulla migliore implementazione è ancora in corso. Nota che gli pseudo-elementi si comportano come elementi reali nel DOM ombra. UN padding su un input non otterrà lo stesso colore di sfondo dello pseudo-elemento.

Selettori CSS

Agli agenti utente è richiesto di ignorare una regola con un selettore sconosciuto. Vedere Selettori di livello 3:

un gruppo di selettori contenenti un selettore non valido non è valido.

Quindi abbiamo bisogno di regole separate per ogni browser. Altrimenti l'intero gruppo verrebbe ignorato da tutti i browser.

::-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!">

Note di utilizzo

  • Fai attenzione a evitare contrasti negativi. Il segnaposto di Firefox sembra essere inadempiente con una opacità ridotta, quindi è necessario utilizzarlo opacity: 1 Qui.
  • Tieni presente che il testo segnaposto viene semplicemente troncato se non si adatta - dimensiona i tuoi elementi di input em e testarli con grandi dimensioni minime per la dimensione del carattere. Non dimenticare le traduzioni: alcune lingue bisogno di più spazio per la stessa parola
  • Browser con supporto HTML per placeholder ma senza il supporto CSS per quello (come Opera) dovrebbe essere testato anche.
  • Alcuni browser usano CSS predefiniti aggiuntivi per alcuni input tipi (email, search). Questi potrebbero influenzare il rendering in modi inaspettati. Usa il proprietà  -webkit-appearance e -moz-appearance per cambiarlo. Esempio:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4527
2018-06-06 08:47



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

Questo stile tutti input e textarea segnaposto.

Nota importante: Non raggruppare queste regole. Invece, crea una regola separata per ogni selettore (un selettore non valido in un gruppo rende l'intero gruppo non valido).


655
2018-02-09 16:44



Potresti anche voler creare stili di testo:

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

260
2017-09-14 12:52



Per bootstrap e Di meno utenti, c'è un mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

96
2018-02-14 21:11



Oltre alla risposta di toscho, ho notato alcune incoerenze del webkit tra Chrome 9-10 e Safari 5 con le proprietà CSS supportate che vale la pena notare.

In particolare Chrome 9 e 10 non supportano background-color, border, text-decoration e text-transform quando si disegna il segnaposto.

Il confronto completo tra browser è Qui.


92
2018-04-14 02:28



Per insolenza gli utenti:

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

68
2018-06-25 09:01



Questo funzionerà bene. DEMO QUI:

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


51
2017-10-08 19:21



In Firefox e Internet Explorer, il normale colore del testo di input sovrascrive la proprietà color dei segnaposto. Quindi, dobbiamo

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

43



Soluzione cross-browser:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Credito: David Walsh


37



Ora abbiamo un modo standard per applicare i CSS al segnaposto di un input: ::placeholder pseudo-elemento da Questo Bozza del modulo CSS 4 di livello.


35