Couleur du curseur clignotant de l'élément de réglage personnalisé CSS

Cette fois, je vais vous apporter la couleur du curseur clignotant de l'élément de réglage personnalisé CSS, quelles sont les précautions pour la couleur du curseur clignotant de l'élément de réglage personnalisé CSS, ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

En raison des besoins professionnels, le texte dans notre zone de saisie doit être différent de la couleur du curseur flottant. Il est certainement difficile de trouver une solution à ce problème dans les livres. , et cela doit être appris par la pratique quotidienne et l'expérience.

Solution

• Utilisez  :<a href="http://www.php.cn/wiki/971.html" target="_blank ">:première ligne<code>:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> Pseudo-élément

• Utilisez <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> et text-fill-color

• utilisent caret-color

::fist-line Modifier l'élément

Principe : De manière générale, définir l'attribut color de la zone de saisie modifiera la couleur du contenu du texte et changera également la couleur du curseur . Et ::first-line peut également définir la couleur de la première ligne du contenu du texte. En utilisant le rapport de poids du sélecteur, ::first-line écrase le color du premier et obtient finalement le résultat souhaité.

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

Défaut : s'applique uniquement aux zones de saisie et n'est pas pris en charge par la vue Web WeChat. Deux sélecteurs doivent être écrits.

text-shadow et text-fill-color

Principe : utilisez d'abord color pour définir la couleur du texte et du curseur, puis utilisez text-shadow pour définir L'ombre du texte couvre la couleur du texte et utilise enfin text-fill-color pour rendre la couleur du texte transparente.

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

Défaut : text-fill-color l'attribut ne prend pas en charge firefox, essayez actuellement d'utiliser le préfixe -webkit-.

caret-color

Principe : C'est le dernier attribut de CSS3, son but est de résoudre le problème de la couleur du curseur.

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

Défauts : Version basse Le navigateur IE ne prend pas en charge

Considérations de compatibilité

Afin d'être compatible avec Situation d'affichage multi-appareils, nous devons prendre en compte certaines situations et utiliser @support jugement conditionnel pour détecter s'il est disponible. Parce que mon environnement est l'affichage mobile, donc pour peu qu'il soit compatible avec les terminaux mobiles, la combinaison de la deuxième et de la troisième solutions peut couvrir une grande surface de l'appareil.

.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; /* 光标颜色 */
    }
}

Résumé

Dans la demande récente, il y a de plus en plus de développement mobile, et la compatibilité des appareils a toujours été un casse-tête. Comment mieux déboguer et écrire de manière plus robuste. code. Ce qu’il faut, c’est une synthèse constante pour réduire la récurrence des erreurs.

En fin de compte, cela sera utile à tout le monde. J'espère que tout le monde l'aimera et le collectionnera !!

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. des choses plus excitantes, veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment gérer l'accès refusé à la base de données MySQL

Étapes et étapes pour exécuter les instructions de service de nœud dans le fond Linux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!