From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fr/web/css/_colon_placeholder-shown/index.html | 199 +++++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 files/fr/web/css/_colon_placeholder-shown/index.html (limited to 'files/fr/web/css/_colon_placeholder-shown') diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..943598fde4 --- /dev/null +++ b/files/fr/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,199 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}
+ +

La pseudo-classe :placeholder-shown permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant un texte de substitution.

+ +
/* Cible tout élément <input> ou <textarea> avec un */
+/* attribut placeholder actuellement affiché        */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Syntaxe

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+:placeholder-shown {
+  border-color: silver;
+}
+ +

HTML

+ +
<input placeholder="Saisir quelque chose ici">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 60)}}

+ +

Dépassement du texte

+ +

Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.

+ +

HTML

+ +
<input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !">
+ +

CSS

+ + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}

+ +

Texte coloré

+ +

HTML

+ +
<input placeholder="Saisir quelque chose ici">
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Texte_coloré")}}

+ +

Champ de saisie personnalisé

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf