stili multipli per inserire il testo segnaposto

Question

voglio per lo stile mia casella di input testo segnaposto, che sto facendo in questo modo:

::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
::-moz-placeholder { font-size: 16pt; color: #555; } 
:-ms-input-placeholder { font-size: 16pt; color: #555; } 
input:-moz-placeholder { font-size: 16pt; color: #555; } 

Ma ho scenari in cui diversi segnaposti richiedono stili diversi come questo:

È possibile fare? Non riesco a combinare correttamente il css sopra con le classi o con un altro tipo di selettore di elementi. Tutte le esercitazioni che ho trovato si fermano semplicemente impostando il testo segnaposto una sola volta e non ottenendo più stili di segnaposto. È un ambiente globale?

Answer 1

Bisogna coniugare la classe con l'elemento pseudo, e quindi è possibile applicare una classe agli elementi di input:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
input::-moz-placeholder { font-size: 16pt; color: #555; } 
 
input:-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
input.other::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
input.other::-moz-placeholder { font-size: 12pt; color: red; } 
 
input.other:-ms-input-placeholder { font-size: 12pt; color: red; } 
 
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input> 
 
<input type="text" class="other" placeholder="Hello"></input>

Nota: ho aggiunto il input qui per chiarezza e correttezza.

Fiddle

Ricordate, i selettori pseudo non sono elementi reali sulla pagina, ma attaccati a qualche altro elemento. Combinali con qualche altro selettore di elementi per abbinare qualcosa di più specifico.

Answer 2

Le classi di utilizzo degli input dovrebbero funzionare. Hai provato il qui sotto:

/* WebKit browsers */ 
 
input.myClassNameOne::-webkit-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 4 to 18 */ 
 
input.myClassNameOne:-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 19+ */ 
 
input.myClassNameOne::-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Internet Explorer 10+ */ 
 
input.myClassNameOne:-ms-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
}

<input type="text" class="myClassNameOne" placeholder="test input" /> 
 
<input type="text" class="myClassNameTwo" placeholder="test input" />

JSFiddle: http://jsfiddle.net/markwylde/fFLL7/1/

Answer 3

Anche se le altre risposte sono corrette, vorrei sottolineare che non è necessario applicare la classe direttamente all'input. Puoi anche applicarlo a un wrapper genitore e modificare leggermente il CSS suggerito per ottenere lo stesso risultato, il che è forse più semplice in quanto potresti dover eseguire meno modifiche sul codice HTML.

Un esempio (vedi anche fiddle):

.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
.default ::-moz-placeholder { font-size: 16pt; color: #555; } 
 
.default :-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
.default input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
.other ::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
.other ::-moz-placeholder { font-size: 12pt; color: red; } 
 
.other :-ms-input-placeholder { font-size: 12pt; color: red; } 
 
.other input:-moz-placeholder { font-size: 12pt; color: red; }

<div class='default'> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
</div> 
 
    
 
<div class='other'> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
</div>