it-swarm.it

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

Chrome supporta l'attributo placeholder sugli elementi 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à grey invece di red.

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

3744
David Murdoch

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 usa una pseudo-classe: :-moz-placeholder (one due punti). [ 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 lo pseudo-elemento semplice ::placeholder [ Ref ]

Internet Explorer 9 e versioni precedenti non supportano affatto l'attributo placeholder, mentre Opera 12 e versioni precedenti non supportano qualsiasi selettore CSS per i segnaposto.

La discussione sulla migliore implementazione è ancora in corso. Nota che gli pseudo-elementi si comportano come elementi reali nel Shadow DOM . 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 Selectors Level 3 :

a 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 utilizzare opacity: 1 qui.
  • Nota che il testo segnaposto viene semplicemente troncato se non si adatta - dimensiona gli elementi di input in em e li prova con le impostazioni di dimensioni minime dei caratteri. Non dimenticare le traduzioni: alcune lingue hai bisogno di 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 utilizzano CSS predefiniti aggiuntivi per alcuni tipi input (email, search). Questi potrebbero influenzare il rendering in modi inaspettati. Usa properties-webkit-appearance e -moz-appearance per cambiarlo. Esempio:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4651
fuxia

/* 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 i segnaposto 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).

684
brillout

Potresti anche voler personalizzare i textareas:

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

Per Bootstrap e Less users, c'è un mixin .placeholder:

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

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 background-color, border, text-decoration e text-transform quando si impostano i segnaposto.

Il confronto completo tra browser è qui .

95
ajcw

Per Sass users:

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

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

56
Love Trivedi

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

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

39
Kristian

Usa il nuovo ::placeholder se usi autoprefixer .

Nota che il .placeholder mixin 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.

37
Mike

Ora abbiamo un modo standard per applicare i CSS al segnaposto di un input: ::placeholder pseudo-elemento di this Modulo CSS 4 Bozza.

37
user3790069

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 opacity per 1, quindi andrà bene.

34
Burak Tokak

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;
}
32
Alias Varghese

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 tuo segnaposto con CSS chiamando questa regola:

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

Per Bootstrap users, 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 usando Less :

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

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

17
user1729061

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;}
16
Banti Mathur

Se si sta utilizzando Bootstrap e non è possibile farlo funzionare, probabilmente si è 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 .form-control, devi 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;
}
16
steady_daddy

Ho provato ogni combinazione qui per cambiare il colore, sulla mia piattaforma mobile, e alla fine è stato:

-webkit-text-fill-color: red;

quale ha fatto il trucco.

14
aviram83

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

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;
   }
6
Md. Abu Sayed

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>

5

Aggiunta di una possibilità molto bella e semplice: filtri CSS

 enter image description here

 enter image description here

 enter image description here

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 (ad eccezione cioè ...)

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

4
Cryptopat

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 conferisce 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;
}
4
Alireza

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.

3
Deepak Kumar

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+ */
2
fraweb

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

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

Vedi i documenti per il mixin di segnaposto di input.

1
bendav91

prova questo ti aiuterà a farlo funzionare in tutti i tuoi browser preferiti:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
Anand

Colore segnaposto su elementi specifici in diversi browser.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }
0
Majedur Rahaman