2013-08-29 1 views
10

Ich möchte meine Eingabefeld Platzhalter-Text, um Stil, die ich so tue:Mehrere Arten für die Eingabe Platzhalter-Text

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

Aber ich habe Szenarien, in denen verschiedene Platzhalter verschiedene Stile wie dies erfordern:

enter image description here enter image description here

Ist dies möglich? Ich kann nicht scheinen, das css oben mit Klassen oder und anderer Art des Elementselektors erfolgreich zu kombinieren. Alle Tutorials, die ich gefunden habe, hören auf, den Platzhaltertext nur einmal zu setzen und nicht auf mehrere Platzhalter-Stylings zu kommen. Ist das eine globale Einstellung?

Antwort

24

Sie haben die Klasse mit dem Pseudo-Element zu kombinieren, und dann können Sie eine Klasse auf die Eingabeelemente anwenden:

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>

Hinweis: Ich habe die input hier für Klarheit und Richtigkeit hinzugefügt.

Fiddle

Denken Sie daran, die Pseudo-Selektoren sind nicht reale Elemente auf der Seite, sondern an einem anderen Element befestigt ist. Kombiniere sie mit einem anderen Elementselektor, um etwas Spezifischeres zu finden.

+0

Wenn Ihr mit 'Bootstrap

' Sie id zielen kann 'Abschnitt # USA-Eingang:' –

6

Verwenden Sie Klassen auf Ihren Eingaben sollte funktionieren. Haben Sie die unten versucht:

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

4

Obwohl die anderen Antworten korrekt sind, möchte ich darauf hinweisen, dass Sie die Klasse nicht direkt auf die Eingabe anwenden müssen. Sie können es auch auf einen übergeordneten Wrapper anwenden und das vorgeschlagene CSS leicht modifizieren, um dasselbe Ergebnis zu erzielen. Dies ist möglicherweise einfacher, da Sie möglicherweise weniger Änderungen an Ihrem HTML vornehmen müssen.

Ein Beispiel (siehe auch 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>

+0

was ist der unterschied zwischen -webkit, -moz, -ms,? – Flash

+0

@Flash das sind browserspezifische Präfixe. Sie werden häufig verwendet, wenn ein Feature noch nicht standardisiert, aber bereits von Browsern implementiert wurde. Heutzutage benutze ich aber prefixfree, es macht all das Präfix für dich (zB in einer Schluckaufgabe) https://leaverou.github.io/prefixfree/ – Pevara

Verwandte Themen