Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie die Farbe eines Platzhalters mit CSS

So ändern Sie die Farbe eines Platzhalters mit CSS

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-13 10:43:1234466Durchsuche

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>

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn