html - change - style placeholder text color css




Modifica il colore del segnaposto di un input HTML5 con i CSS (20)

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 . [ Ref ]
  • Mozilla Firefox dalla 4 alla 18 utilizza una pseudo-classe :-moz-placeholder ( un punto ). [ Ref ]
  • Mozilla Firefox 19+ utilizza uno pseudo-elemento: ::-moz-placeholder , ma il vecchio selettore funzionerà ancora per un po '. [ Ref ]
  • Internet Explorer 10 e 11 utilizzano una pseudo-classe :-ms-input-placeholder . [ Ref ]
  • Aprile 2017: la maggior parte dei browser moderni supporta il semplice pseudo-elemento ::placeholder [ Ref ]

Internet Explorer 9 e versioni precedenti non supportano affatto l'attributo placeholder , mentre Opera 12 e versioni precedenti non supportano alcun selettore CSS per i 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 avrà lo stesso colore di sfondo dello pseudo-elemento.

Selettori CSS

Agli agenti utente è richiesto di ignorare una regola con un selettore sconosciuto. Vedi i selezionatori di livello 3 :

un group di selettori che contiene 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 predefinito con un'opacità ridotta, quindi è necessario utilizzare opacity: 1 qui.
  • Nota che il testo segnaposto viene semplicemente troncato se non si adatta - ridimensiona gli elementi di input in em e testali con impostazioni di dimensioni minime dei caratteri. Non dimenticare le traduzioni: alcune lingue richiedono più spazio per la stessa parola.
  • Dovrebbero essere testati anche i browser con supporto HTML per placeholder ma senza supporto CSS (come Opera).
  • Alcuni browser usano CSS predefiniti aggiuntivi per alcuni tipi di input ( email , search ). Questi potrebbero influenzare il rendering in modi inaspettati. Usa le properties -webkit-appearance e -moz-appearance per cambiarlo. Esempio:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Chrome supporta l' attributo segnaposto sugli elementi di input[type=text] (altri probabilmente lo fanno anche tu).

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

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

Value rimarrà comunque grey anziché red .

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


Aggiungendo una possibilità molto bella e semplice: i filtri CSS !

Disegnerà tutto, incluso il segnaposto.

Quanto segue imposterà entrambi gli input sulla stessa tavolozza, usando il filtro hue per cambiare colore. Rende molto bene ora nei browser (eccetto per esempio ...)

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

Per consentire agli utenti di cambiarlo in modo dinamico, utilizzando un colore per il tipo di input per le modifiche o per trovare sfumature, consulta questo snippet:

Da: 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>

Documenti dei filtri CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


Ecco un altro esempio:

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


Ho appena realizzato qualcosa per Mozilla Firefox 19+ che il browser fornisce un valore di opacità per il segnaposto, quindi il colore non sarà quello che desideri veramente.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Sovrascrivo l' opacity per 1, quindi andrà bene.


Il modo più semplice sarebbe:

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

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

OK, i segnaposto si comportano in modo diverso nei vari browser, quindi è necessario utilizzare il prefisso del browser nel CSS per renderli identici, ad esempio Firefox offre una trasparenza al segnaposto per impostazione predefinita, quindi è necessario aggiungere l'opacità 1 al css, più il colore, non è una grande preoccupazione il più delle volte, ma buono per averli coerenti:

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

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.

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

Il confronto completo tra browser è here .


Penso che questo codice funzionerà perché un segnaposto è necessario solo per il testo del tipo di input. Quindi questo CSS di una riga sarà sufficiente per le tue necessità:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Per Bootstrap e Less utenti, esiste un mix .placeholder:

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

Per gli utenti Bootstrap , se si utilizza class="form-control" , potrebbe esserci un problema di specificità CSS. Dovresti ottenere una priorità più alta:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

O se stai utilizzando Less :

.form-control{
    .placeholder(red);
}

Per l'utente SASS / SCSS che utilizza Bourbon , ha una funzione integrata.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Uscita CSS, puoi anche prendere questa parte e incollarla nel tuo codice.

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

Puoi cambiare il colore del segnaposto di un input HTML5 con i CSS. Se per caso, il tuo conflitto CSS, questa nota sul codice funziona, puoi usare (! Important) come sotto.

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

Spero che questo ti sia d'aiuto.


Puoi usare questo per stile di input e focus:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

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


Se stai usando Bootstrap e non riesci a farlo funzionare probabilmente hai perso il fatto che Bootstrap stesso aggiunge questi selettori. Questo è Bootstrap v3.3 di cui stiamo parlando.

Se stai provando a cambiare il segnaposto all'interno di una classe CSS di controllo forma, dovresti sovrascriverlo in questo modo:

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

Usa il nuovo ::placeholder se usi autoprefixer .

Nota che il mix di .placeholder di Bootstrap è deprecato a favore di questo.

Esempio:

input::placeholder { color: black; }

Quando si utilizza autoprefixer, quanto sopra verrà convertito nel codice corretto per tutti i browser.


prova questo codice per diversi stili di input diversi

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

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

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

Questo textarea segnaposto di input e textarea .

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





html-input