Maison > Article > interface Web > Introduction à la modification du style d'espace réservé avec CSS (exemple de code)

Introduction à la modification du style d'espace réservé avec CSS (exemple de code)

青灯夜游avant: 2018-11-10 17:30:238025parcourir

Le contenu de cet article est une introduction à la méthode de modification du style d'espace réservé avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les utilisateurs du projet rencontrent souvent le besoin de modifier la couleur de l'espace réservé de l'entrée. Voici un aperçu de la façon de définir l'espace réservé avec CSS :

Tout d'abord, jetons un coup d'œil à l'espace réservé. style de saisie par défaut de chrome

<input>

(espace réservé)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

(style de saisie)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

se trouve dans placeholder et inputLes couleurs par défaut sont un peu différentes. Modifions maintenant la couleur de input

<input>

(espace réservé)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

(entrée)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

Il n'est pas difficile de constater que l'attribut color ne peut changer que la couleur de la valeur d'entrée, et la couleur de placeholder ne change pas du tout. Alors, comment changer la couleur de placeholder.

Pour changer la couleur de placeholder vous devez utiliser la pseudo classe ::placeholder


<input>

(placeholder)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

( input)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

Ce qu'il faut noter, c'est la compatibilité de la pseudo-classe ::palceholder Ce qui précède est le résultat de l'exécution dans le navigateur Chrome. le code ressemble à ceci dans IE11

(espace réservé - ie11)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

(entrée - ie11)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

Solution IE :

Tout d'abord, IE9 et versions antérieures ne prennent pas en charge les espaces réservés. IE10 doit utiliser :-ms-input-placeholder et l'attribut doit ajouter !important pour augmenter la priorité.


<input>

(espace réservé ie11)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

(entrée ie11)

Introduction à la modification du style despace réservé avec CSS (exemple de code)

est donné après Solutions d'adaptation pour d'autres navigateurs

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun.

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!

css chrome 伪类 input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir un effet d'animation romantique de pluie de météores avec CSS+JS ? (exemple de code)Article suivant：Comment obtenir un effet d'animation romantique de pluie de météores avec CSS+JS ? (exemple de code)

Articles Liés

Voir plus