CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Simplifier un code CSS

Routalaoueche
Routalaoueche
Niveau 2
07 octobre 2020 à 14:23:44

Y a-il moyen de simplifier ce code CSS ?

#nom::placeholder {color: #a4a4a4;}
#prenom::placeholder {color: #a4a4a4;}
#email::placeholder {color: #a4a4a4;}
#adresse::placeholder {color: #a4a4a4;}
#cp::placeholder {color: #a4a4a4;}
#ville::placeholder {color: #a4a4a4;}

J'ai essayé ça et ça ne marche pas :

#nom #prenom #email #adresse #cp #ville::placeholder {color: #a4a4a4;}

J'ai aussi essayé ça et ça ne marche pas non plus :

#nom,prenom,email,adresse,cp,ville::placeholder {color: #a4a4a4;}

Ainsi que ça qui ne marche pas :

#nom, #prenom, #email, #adresse, #cp, #ville::placeholder {color: #a4a4a4;}

Quelqu'un aurait une solution pour simplifier ce code CSS ?

Nuagedecube
Nuagedecube
Niveau 25
07 octobre 2020 à 14:38:28

Pourquoi ne pas attribuer une classe .test

<style>#nom, #prenom, #email, #adresse, #cp, #ville, .test::placeholder{
  color: red; }
</style>

<textarea id="nom" class="test" placeholder="test"></textarea>
<textarea id="email" class="test" placeholder="test"></textarea>

afin que les éléments soit mieux rangés.

Routalaoueche
Routalaoueche
Niveau 2
07 octobre 2020 à 14:50:31

En principe, l'attribut placeholder de input attend une valeur qui s'affichera dans le champ de saisie pour indiquer à l'internaute ce qu'il doit saisir. Cette valeur est indiquée comme suit : placeholder="Adresse". Si j'écris placeholder="test", il va m'écrire "test" dans tous les champs !

Il n'est pas bon ton code !

deepblue
deepblue
Niveau 16
07 octobre 2020 à 14:56:19
#nom::placeholder,
#prenom::placeholder,
#email::placeholder,
#adresse::placeholder,
#cp::placeholder,
#ville::placeholder {
  color: #a4a4a4;
}

Ou bien tu ajoutes une classe sur tes éléments et tu pourras faire :

.taClasse::placeholder {
  color: #a4a4a4;
}

<input id="nom" class="taClasse" ..... />
Message édité le 07 octobre 2020 à 14:57:31 par deepblue
Routalaoueche
Routalaoueche
Niveau 2
07 octobre 2020 à 15:08:07

Merci depblue, ça marche ton premier code.
Le second est tellement évident que je m'en veux de ne pas y avoir pensé !

LynxEmpereur
LynxEmpereur
Niveau 10
12 octobre 2020 à 11:10:19

Deepblue a effectivement la solution. Sinon donc :

J'ai essayé ça et ça ne marche pas :

  1. nom #prenom #email #adresse #cp #ville::placeholder {color: #a4a4a4;}

Là tu chercherais l'enfant #ville:placeholder qui serait donc imbriqué dans #cp lui même dans #adresse etc.

J'ai aussi essayé ça et ça ne marche pas non plus :

  1. nom,prenom,email,adresse,cp,ville::placeholder {color: #a4a4a4;}

là tu prends les id sans les placeholders sauf pour ville et il manque les "#"

Les dernier un peu pareil.

Sous forums
  • Aide à l'achat Mac
  • Internet
  • Macintosh
  • Création de sites web
  • Création de Jeux
  • Linux
  • Programmation
  • Steam Deck
  • Hardware
La vidéo du moment