Heim >Web-Frontend >CSS-Tutorial >So ändern Sie die Farbe eines Platzhalters mit CSS
So ändern Sie die Farbe eines Platzhalters mit CSS
- 醉折花枝作酒筹Original
- 2021-04-13 10:43:1234505Durchsuche
Methode: Verwenden Sie zunächst den Selektor „::placeholder“, um das zu ändernde Element auszuwählen. Fügen Sie dann dem Element den Stil „color:color value;“ hinzu. Beachten Sie, dass Platzhalter ein neuer Selektor in CSS3 ist und in verschiedenen Browsern unterschiedliche Präfixe („-ms-“, „-webkit-“ usw.) erfordert.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Das Platzhalterattribut ist ein neues Attribut in HTML5. Seine Funktion besteht darin, die Eingabeaufforderungsinformationen des erwarteten Werts des Eingabefelds zu beschreiben.
Aber es gibt bestimmte Probleme mit der Browserkompatibilität. Nehmen Sie als Beispiel Chorme:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 12px;
}
input {//边框效果
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入">
</body>
</html> Der dem Chrome-Browser entsprechende Selektor ist
input::-webkit-input-placeholderDer Effekt ist wie folgt:
Die Selektoren für andere Browser sind wie folgt:
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color : red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color : red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color : red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color : red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color : red;
}WebKit-, Blink- und Edge-Browser usw. müssen das Präfix -webkit- haben, und es ist ein Doppelpunkt. Sie müssen beim Schreiben auch Eingaben einschließen- Für Firefox gibt es zwei Möglichkeiten, es zu schreiben. Beiden muss das Präfix -moz- vorangestellt werden. . Niedrigere Versionen von Firefox verwenden Doppelpunkte (:), während höhere Versionen doppelte Doppelpunkte (::) verwenden; Firefox erfordert keine Eingabe.
- Das Platzhalterattribut wird nur in IE10+ und IE11 unterstützt und wird mit dem Präfix -ms- und einem Doppelpunkt (:) geschrieben. Sie müssen Eingaben mitbringen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Farbe eines Platzhalters mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!