Introduction à la modification du style d'espace réservé avec CSS (exemple de code)-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-11-10 17:30:23

avant

8032 Les gens l'ont consulté

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>

Copier après la connexion

(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>

Copier après la connexion

(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>

Copier après la connexion

(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>

Copier après la connexion

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

Copier après la connexion

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!