recherche
Maisoninterface Webtutoriel CSSComment puis-je styliser des champs de saisie vides avec CSS à l'aide de « :placeholder-shown » ?

How Can I Style Empty Input Fields with CSS Using `:placeholder-shown`?

Styliser les champs de saisie vides avec CSS : un guide pratique

Styliser les champs de saisie vides pose un défi en CSS, car faire correspondre les valeurs vides avec le Le sélecteur common value="" peut être peu fiable. Pour lutter efficacement contre cette situation, nous étudions une solution innovante et efficace.

Dans les navigateurs modernes, la pseudo-classe :placeholder-shown vient à la rescousse. Contrairement à ::placeholder, qui cible le texte d'espace réservé, :placeholder-shown sélectionne spécifiquement les champs de saisie vides. Cela fournit un moyen précis d'appliquer des styles lorsque le champ est dépourvu de toute entrée utilisateur.

Pour illustrer cette approche élégante, considérons la règle CSS suivante :

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Pour utiliser cette règle CSS en effet, il est crucial de se rappeler que le champ de saisie doit posséder un attribut d'espace réservé. De plus, dans les navigateurs Chrome, il est essentiel de garantir qu'un caractère espace est présent dans l'attribut d'espace réservé pour un bon fonctionnement. Cela garantit que la pseudo-classe :placeholder-shown est déclenchée comme prévu, même si le champ de saisie apparaît initialement vide à l'utilisateur.

Voici un exemple pour démontrer l'implémentation :

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

En conclusion, en exploitant la puissance de :placeholder-shown, nous obtenons la possibilité de styliser sans effort les champs de saisie vides en CSS. Cette pseudo-classe innovante élimine les limitations du sélecteur value="", permettant aux développeurs de créer facilement des formulaires conviviaux.

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Trois prévisions de l'enquête sur l'état de la CSS 2019Trois prévisions de l'enquête sur l'état de la CSS 2019Apr 19, 2025 am 09:43 AM

L'exécution d'une enquête de développeur comme l'état de CSS est un processus en plusieurs étapes. Tout d'abord, vous devez collecter les données. Ensuite, vous le traitez en forme utilisable.

Enfin ... un post sur enfin dans les promessesEnfin ... un post sur enfin dans les promessesApr 19, 2025 am 09:39 AM

«Quand tire enfin dans une promesse JavaScript?» C'est une question qui m'a été posée dans un atelier récent et j'ai pensé que j'éclaire un petit article pour éliminer tout

Micro frontsMicro frontsApr 19, 2025 am 09:37 AM

Un jour aléatoire il n'y a pas longtemps, j'ai commencé à entendre blague après une blague sur les "micro fronts" - en quelque sorte comment j'ai appris pour la première fois sur les toasts. Je ne comprenais pas

CSS-Tricks sur le volantCSS-Tricks sur le volantApr 19, 2025 am 09:36 AM

J'ai d'abord entendu parler du volant à travers leur produit local, qui est une application native pour travailler sur des sites WordPress. Si vous demandez autour de ce que les gens utilisent pour cela

PSA: le liaison à un modèle de code de conduite n'est pas la même chose que d'avoir un code de conduitePSA: le liaison à un modèle de code de conduite n'est pas la même chose que d'avoir un code de conduiteApr 19, 2025 am 09:35 AM

Saviez-vous que nous avions un site qui répertorie toutes les conférences à venir liées à la conception et au développement de sites Web frontaux? Nous faisons! Si vous cherchez à vous rendre à un, vérifiez

Le douzième quatrièmeLe douzième quatrièmeApr 19, 2025 am 09:30 AM

CSS-Tricks a 12 ans! Fermement dans ce stade du début de l'adolescence, je dis, comme nous le faisons chaque année, que nous réfléchissons à l'année écoulée. Je ferais mieux d'avoir

Ce dont le Web a besoin maintenant (et comment est là d'artefact pour ça)Ce dont le Web a besoin maintenant (et comment est là d'artefact pour ça)Apr 19, 2025 am 09:28 AM

J'ai récemment eu le plaisir de rejoindre Dave Rupert, Chris Coyier et Chris Ferdinandi sur le talk-show de la boutique pour parler de la prochaine conférence Artifact

Gérer plusieurs arrière-plans avec des propriétés personnaliséesGérer plusieurs arrière-plans avec des propriétés personnaliséesApr 19, 2025 am 09:21 AM

Une chose cool à propos des propriétés personnalisées CSS est qu'elles peuvent faire partie d'une valeur. Laissez-vous dire que vous utilisez plusieurs arrière-plans pour retirer une conception. Chaque

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft