ATOZ CSS Astuce rapide: texte d'espace réservé

Cet article fait partie de la série Atoz CSS. Vous pouvez trouver d'autres entrées pour la série ici. Vous pouvez afficher le texte intégral et les captures d'écran de ses pseudo-éléments vidéo correspondants.

Bienvenue dans notre série Atoz CSS! Dans cette série, j'explorerai diverses valeurs (et propriétés) de CSS qui commencent par différentes lettres dans l'alphabet. Nous savons que parfois les captures d'écran ne suffisent pas, donc dans cet article, nous avons ajouté un nouveau conseil sur l'espace réservé de style.

p signifie texte d'espace réservé

Les pseudo-éléments :before et :after sont idéaux pour construire des fonctionnalités de conception complexes sans gâcher des majorations avec des éléments non sémantiques. D'autres pseudo-éléments, tels que :first-line et :first-letter, nous permettent d'accéder au style des éléments non marqués dans des documents HTML.

Nous en avons examiné beaucoup dans la capture d'écran pseudo-éléments, mais un pseudo-élément que nous n'avons pas regardé était le style du texte d'espace réservé. Résolvons ce problème.

Sélectionnez l'espace de placement d'entrée

Tout d'abord, imaginons le HTML suivant:

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

Nous pouvons définir la couleur du texte d'entrée en rouge, comme indiqué ci-dessous:

<code class="language-css">.name-field {
  color: red;
}</code>

Nous pouvons également sélectionner et définir le style d'entrée en fonction de ses attributs d'espace réservé:

<code class="language-css">input[placeholder="Enter your name"] {
  color: red;
}</code>

mais cela stylisera toujours le texte de l'entrée de l'utilisateur tapé dans le champ de saisie, plutôt que de définir l'apparence du texte d'espace réservé lui-même. Pour ce faire, nous avons besoin d'une série de sélecteurs de préfixe des fournisseurs pour les pseudo-éléments d'espaceur.

<code class="language-css">::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}</code>

Cela ressemble à une répétition, mais malheureusement, il n'y a plus de façon concise (ne vous répétez pas).

La méthode suivante n'est pas valide:

<code class="language-css">::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}</code>

En effet

Définir le style d'espace réservé avec SASS

Une façon de résoudre ce CSS en double est d'utiliser des macros hybrides SASS. C'est ce que j'utilise dans 99% des projets:

<code class="language-scss">@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}</code>

Cela me permet de styliser des espaces réservés dans tous les navigateurs en utilisant un seul sass @include qui aide à rendre le code plus court et plus facile à entretenir.

Faites attention à la spécificité lors de la définition du style d'espace réservé

Dans le navigateur IE, la définition du style entré peut remplacer les styles définis pour le texte de l'espace réservé.

<code class="language-css">:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中将为蓝色 */
}</code>

Assurez-vous que les styles d'espace réservé IE ont une spécificité plus élevée pour qu'ils apparaissent comme prévu. Cela peut même être un cas d'utilisation !important, mais soyez prudent lorsque vous utilisez cet outil puissant.

Faites attention à l'opacité des espaces réservés

Dans Firefox, l'opacité par défaut du texte d'espace réservé est d'environ 0,5, donc le réglage opacity: 1 sur l'espace réservé fera que la couleur s'assombrit à moins que vous ne définissiez également color: red.

Même si vous utilisez Normalize.css, cet élément ne sera pas réinitialisé pour vous. Si les espaces réservés complètement opaques sont cruciaux pour votre projet, gardez cette astuce à l'esprit!

FAQ sur le texte de l'espace réservé CSS (FAQ)

Comment changer la couleur du texte d'espace réservé dans CSS?

La couleur du texte d'espace réservé dans CSS peut être modifiée en utilisant le pseudo-élément ::placeholder. Ce pseudo-élément vous permet de styliser le texte d'espaceur d'espaceur dans les éléments d'entrée ou de zone de texte. Voici un exemple de la façon de changer la couleur en rouge:

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

N'oubliez pas que la compatibilité du navigateur est importante. Pour Firefox, utilisez ::-moz-placeholder; pour Internet Explorer, utilisez :-ms-input-placeholder; ::-webkit-input-placeholder

Puis-je modifier la taille de la police du texte de l'espace réservé?

Oui, vous pouvez modifier la taille de la police du texte de l'espace réservé. Tout comme la modification de la couleur, vous pouvez utiliser le pseudo-élément

pour modifier la taille de la police. Voici un exemple: ::placeholder

<code class="language-css">.name-field {
  color: red;
}</code>

Cela modifie la taille de la police du texte de l'espace réservé à 18px.

Est-il possible de modifier le style de la police du texte d'espace réservé?

Absolument, vous pouvez modifier le style de police du texte de l'espace réservé. Vous pouvez le faire en italique, audacieux ou tout autre style que vous voulez. Voici un exemple de la façon de le faire en italique:

<code class="language-css">input[placeholder="Enter your name"] {
  color: red;
}</code>

Cela modifie le style de police du texte de l'espace réservé en italique.

Puis-je modifier l'opacité du texte de l'espace réservé?

Oui, vous pouvez modifier l'opacité du texte d'espace réservé. Cela peut être fait en utilisant l'attribut

dans CSS. Voici un exemple: opacity

<code class="language-css">::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}</code>

Cela modifie l'opacité du texte d'espace réservé à 0,5, ce qui le rend translucide.

Comment ajouter de la couleur d'arrière-plan au texte d'espace réservé?

Malheureusement, vous ne pouvez pas ajouter de couleur d'arrière-plan au texte de l'espace réservé.

Les pseudo-éléments vous permettent uniquement de définir la couleur, la taille de la police, le style de la police et l'opacité du texte d'espace réservé. Il ne prend pas en charge d'autres attributs tels que ::placeholder. background-color

Puis-je utiliser l'animation CSS sur le texte de l'espace réservé?

Non, vous ne pouvez pas utiliser l'animation CSS sur le texte de l'espace réservé.

Les pseudo-éléments ne prennent pas en charge les animations ou transitions CSS. ::placeholder

est-il possible de définir différents styles d'espace réservés de différentes manières?

Oui, vous pouvez définir différents styles d'espace réservés de différentes manières. Il vous suffit d'utiliser une classe ou un ID différent pour chaque élément d'entrée ou de zone de texte. Voici un exemple:

<code class="language-css">::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}</code>

Cela rendra le texte d'espace réservé dans l'entrée avec la classe "Input1" Red, et le texte d'espace réservé dans l'entrée avec la classe "Input2" bleu.

Puis-je utiliser des pseudo-classes avec ::placeholder?

Non, vous ne pouvez pas utiliser des pseudo-classes telles que :hover, :active ou :focus avec ::placeholder. ::placeholder Les pseudo-éléments ne prennent pas en charge les pseudo-classes.

Est-il possible de modifier le texte du Placeholder à l'aide de CSS?

Non, vous ne pouvez pas modifier le texte d'espace réservé à l'aide de CSS. Le contenu du texte d'espace réservé ne peut être modifié qu'à l'aide de HTML.

Puis-je utiliser des requêtes multimédias dans ::placeholder?

Oui, vous pouvez utiliser des requêtes multimédias dans ::placeholder. Cela vous permet de styliser le texte de l'espace réservé de différentes manières en fonction de la taille ou de l'appareil de l'écran. Voici un exemple:

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

Cela modifie la couleur du texte d'espace réservé sur l'écran avec une largeur d'écran de 600px ou plus petite à rouge.

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!