Einführung in die Änderung des Platzhalterstils mit CSS (Codebeispiel)

Der Inhalt dieses Artikels ist eine Einführung in die Methode zum Ändern des Platzhalterstils mit CSS. Ich hoffe, dass er für Freunde hilfreich ist.

Projektbenutzer müssen häufig die Farbe des Eingabeplatzhalters ändern. Hier sehen Sie, wie Sie den Platzhalter mit CSS festlegen:

Werfen wir zunächst einen Blick auf die Standardeingabe Stil von Chrom

<input>

(Platzhalter)

(Eingabestil)

kann gefunden werden in placeholder und input Die Standardfarben sind etwas anders. Jetzt ändern wir die Farbe von input

<input>

(Platzhalter)

(Eingabe)

Es ist nicht schwer herauszufinden, dass das Attribut color nur die Farbe des Eingabewerts ändern kann und sich die Farbe von placeholder überhaupt nicht ändert. So ändern Sie die Farbe von placeholder.

Um die Farbe von placeholder zu ändern, müssen Sie die Pseudoklasse ::placeholder

<input>

(Platzhalter)

verwenden (Eingabe)

Was zu beachten ist, ist die Kompatibilität der ::palceholder-Pseudoklasse. Das Obige ist das Ergebnis der Ausführung im Chrome-Browser sieht in IE11 so aus

(Platzhalter - ie11)

(Eingabe - ie11)

IE-Lösung:

Erstens unterstützen IE9 und niedriger keine Platzhalter. IE10 muss :-ms-input-placeholder verwenden und das Attribut muss !important hinzufügen, um die Priorität zu erhöhen.

<input>

(Platzhalter ie11)

(Eingabe ie11)

gibt andere Ansichten nach Gerät Anpassungsschema

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonEinführung in die Änderung des Platzhalterstils mit CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!