Blinkende Cursorfarbe des benutzerdefinierten CSS-Einstellungselements

Dieses Mal werde ich Ihnen die blinkende Cursorfarbe des benutzerdefinierten CSS-Einstellungselements vorstellen. Was sind die Vorsichtsmaßnahmen für die blinkende Cursorfarbe des benutzerdefinierten CSS-Einstellungselements? Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.

Vorwort

Aus geschäftlichen Gründen muss sich der Text in unserem Eingabefeld von der Farbe des schwebenden Cursors unterscheiden. Es ist definitiv schwierig, in Büchern eine Lösung für dieses Problem zu finden , und es muss durch tägliches Üben und Erfahrung erlernt werden.

Lösung

• Verwenden Sie :<a href="http://www.php.cn/wiki/971.html" target="_blank ">:first-line<code>:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> Pseudoelement

• Verwenden Sie <a href="http://www.php.cn/wiki/861.%20html" target="_blank">text-shadow<code><a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a> und text-fill-color

• verwenden caret-color

::fist-line Element ändern

Prinzip: Im Allgemeinen ändert das Festlegen des color-Attributs des Eingabefelds die Farbe des Textinhalts und auch die Farbe des Cursors . Und ::first-line kann auch die Farbe der ersten Zeile des Textinhalts festlegen. Mithilfe des Gewichtsverhältnisses des Selektors überschreibt ::first-line das vorherige color und erhält schließlich das gewünschte Ergebnis.

input.form-control {
    color: #05d380; /* 光标颜色 */
}
input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

Fehler: gilt nur für Eingabefelder und wird von der WeChat-Webansicht nicht unterstützt. Es müssen zwei Selektoren geschrieben werden.

Textschatten und Textfüllfarbe

Prinzip: Verwenden Sie zuerst color, um die Farbe von Text und Cursor festzulegen, und verwenden Sie dann text-shadow, um set Textschatten deckt die Textfarbe ab und verwendet schließlich text-fill-color, um die Textfarbe transparent zu machen.

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

Fehler: text-fill-color-Attribut unterstützt firefox nicht, versuchen Sie derzeit, das -webkit--Präfix zu verwenden.

caret-color

Prinzip: Dies ist das neueste Attribut von CSS3. Sein Zweck besteht darin, das Problem der Cursorfarbe zu lösen.

.form-control {
    color: #333; /* 文本颜色 */
    caret-color: #05d380; /* 光标颜色 */
}

Defekte:Niedrige VersionIE-Browsernicht unterstützt

Kompatibilitätsüberlegungen

Um mit der Anzeige kompatibel zu sein Mehrere Endgeräte. Wir müssen einige Situationen berücksichtigen und @support bedingte Beurteilung verwenden, um festzustellen, ob es verfügbar ist. Da es sich bei meiner Umgebung um eine mobile Anzeige handelt, kann die Kombination der zweiten und dritten Lösung einen großen Bereich des Geräts abdecken, sofern eine Kompatibilität mit mobilen Endgeräten erforderlich ist.

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}
@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本颜色 */
        caret-color: #05d380; /* 光标颜色 */
    }
}

Zusammenfassung

Aufgrund der jüngsten Nachfrage gibt es immer mehr Entwicklungen für mobile Endgeräte, und die Gerätekompatibilität war schon immer ein Problem. Wie kann man besser debuggen und kompatiblere Produkte schreiben? Starker Code. Notwendig ist eine ständige Zusammenfassung, um die Wiederholung von Fehlern zu reduzieren.

Letztendlich wird es allen helfen. Ich hoffe, dass es jedem gefällt und jeder es sammelt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Dinge finden Sie auf der chinesischen PHP-Website. Andere verwandte Artikel!

Empfohlene Lektüre:

So gehen Sie mit verweigertem MySQL-Datenbankzugriff um

Schritte und Anleitungen zum Ausführen von Node-Service-Anweisungen der Linux-Hintergrund

Das obige ist der detaillierte Inhalt vonBlinkende Cursorfarbe des benutzerdefinierten CSS-Einstellungselements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!