So ändern Sie die Farbe eines Platzhalters mit CSS-CSS-Tutorial-php.cn

So ändern Sie die Farbe eines Platzhalters mit CSS

醉折花枝作酒筹

Freigeben： 2023-01-05 16:07:57

Original

34506 Leute haben es durchsucht

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.

So ändern Sie die Farbe eines Platzhalters mit CSS

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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:

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!