Cambia il colore del segnaposto di un input HTML5 con CSS

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

Ma quanto segue CSSnon fa nulla per il valore del segnaposto:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Valuerimarrà comunque greyinvece di red.

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

Implementazione

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

• WebKit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft bordo si utilizza un pseudo-elemento: ::-webkit-input-placeholder. ^{[ Rif ]}
• Mozilla Firefox da 4 a 18 utilizza una pseudo-classe: :-moz-placeholder( due punti). ^{[ Rif ]}
• Mozilla Firefox 19+ utilizza uno pseudo-elemento:, ::-moz-placeholderma il vecchio selettore funzionerà ancora per un po '. ^{[ Rif ]}
• Internet Explorer 10 e 11 si utilizza un pseudo-classe: :-ms-input-placeholder. ^{[ Rif ]}
• Aprile 2017: i browser più moderni supportano il semplice pseudo-elemento ::placeholder ^{[ Ref ]}

Internet Explorer 9 e versioni precedenti non supportano affatto l' placeholderattributo, mentre Opera 12 e versioni precedenti non supportano alcun selettore CSS per segnaposto.

La discussione sulla migliore implementazione è ancora in corso. Nota che gli pseudo-elementi si comportano come elementi reali in Shadow DOM . A paddingsu an inputnon otterrà lo stesso colore di sfondo dello pseudo-elemento.

Selettori CSS

I programmi utente devono ignorare una regola con un selettore sconosciuto. Vedi Selettori Livello 3 :

un gruppo 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 sull'utilizzo

• Fai attenzione a evitare contrasti negativi. Il segnaposto di Firefox sembra essere predefinito con un'opacità ridotta, quindi deve essere utilizzato opacity: 1qui.
• Nota che il testo segnaposto viene semplicemente tagliato se non si adatta: ridimensiona gli elementi di input eme testali con impostazioni minime per il carattere. Non dimenticare le traduzioni: alcune lingue hanno bisogno di più spazio per la stessa parola.
• Anche i browser con supporto HTML placeholderma senza supporto CSS (come Opera) dovrebbero essere testati.
• Alcuni browser utilizzano CSS predefiniti aggiuntivi per alcuni inputtipi ( email, search). Questi potrebbero influire sul rendering in modi imprevisti. Usa le proprietà -webkit-appearance e -moz-appearanceper cambiarle. Esempio:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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 disegnerà tutti inpute textareasegnaposto.

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

Potresti anche voler modellare le textareas:

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

Per Bootstrap e Meno utenti, esiste un mixin .placeholder:

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

Oltre alla risposta di toscho, ho notato alcune incongruenze 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-decoratione text-transformquando lo styling il segnaposto.

Il confronto completo tra browser è qui .

Per gli utenti di 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);
}

Funzionerà benissimo. 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" />

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

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

Utilizzare il nuovo ::placeholderse si utilizza la correzione automatica .

Si noti che il mixin .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.

Ora abbiamo un modo standard per applicare i CSS al segnaposto di un input: ::placeholderpseudo-elemento da questa bozza di livello 4 del modulo CSS.

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

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

Ho sovrascritto il valore opacityper 1, quindi andrà bene.

Non ricordo dove ho trovato questo frammento di codice su Internet (non è stato scritto da me, non ricordo dove l'ho trovato, né chi lo ha scritto).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Basta caricare questo codice JavaScript e quindi modificare il segnaposto con CSS chiamando questa regola:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

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

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

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

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

O se stai usando Meno :

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

Se stai usando Bootstrap e non riesci a farlo funzionare, probabilmente ti sei perso il fatto che Bootstrap stesso aggiunge questi selettori. Stiamo parlando di Bootstrap v3.3.

Se stai cercando di cambiare il segnaposto all'interno di una classe CSS .form-control, 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;
}

Questo codice breve e pulito:

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

Cosa ne pensi di questo

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

Nessun CSS o segnaposto, ma ottieni la stessa funzionalità.

Ho provato tutte le combinazioni qui per cambiare il colore, sulla mia piattaforma mobile, e alla fine è stato:

-webkit-text-fill-color: red;

che ha fatto il trucco.

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

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Output CSS, puoi anche prendere questa porzione 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;
}

prova questo codice per diversi elementi di input stile diverso

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

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>

Aggiungendo un'effettiva possibilità molto bella e semplice: filtri CSS !

Disegnerà tutto, incluso il segnaposto.

Quanto segue imposterà entrambi gli input sulla stessa tavolozza, usando il filtro tonalità per il cambio colore. Ora viene visualizzato molto bene nei browser (tranne 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 modificarlo in modo dinamico, utilizzando un colore di tipo di input per le modifiche o per trovare sfumature, dai un'occhiata a questo frammento:

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 sui filtri css: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

OK, i segnaposto si comportano in modo diverso nei diversi browser, quindi è necessario utilizzare il prefisso del browser nei CSS per renderli identici, ad esempio Firefox fornisce 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 è bene 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;
}

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

::-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 possa aiutare.

Puoi usarlo per lo 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+ */

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

Compass ha un mixin per questo fuori dalla scatola.

Prendi il tuo esempio:

<input type="text" placeholder="Value">

E in SCSS usando la bussola:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Consulta i documenti per il mixin input-placeholder.

Ecco la soluzione con i selettori CSS

::-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 { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft Edge utilizzano uno pseudo-elemento:
  :: - webkit-input-placeholder.
• Mozilla Firefox da 4 a 18 utilizza una pseudo-classe
  :: -moz-segnaposto (due punti).
  Mozilla Firefox 19+ utilizza uno pseudo-elemento:
  :: - moz-placeholder, ma il vecchio selettore funzionerà ancora per un po '.
• Internet Explorer 10 e 11 utilizzano una pseudo-classe
  :: -ms-input-placeholder.
• Internet Explorer 9 e versioni precedenti non supportano affatto l'attributo segnaposto, mentre Opera 12 e versioni precedenti non supportano alcun selettore CSS per segnaposto.

Una parte di HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Mostrerò come cambiare il colore dell'espressione di "Inserisci frase" da CSS:

  ::placeholder{
  color:blue;
   }