28182 sujets

CSS et mise en forme, CSS3

[Résolu] Afficher le libéllé au dessus du champ d'un formulaire

Bonjour,
Je fais un nouveau site collaboratif ou un visiteur pourra publier du contenu.
Évidemment, il y aura des contrôles de champs (comme pour l'url) mais plutôt que la personne le découvre en sauvegardant l'article, je souhaiterai afficher libellé au dessus du champ (éventuellement au survol du remplissage, pour tester, ce qui me paraîtrait plus logique). Voir image jointe upload/1558082743-58614-capturedancrande2019-05-1710-.png
Actuellement le cms affiche le libellé au survol du nom du champ, ce que je pense peu de personne font!
http://v2.alterweb.info/fr/proposez-un-site-web
onglet site web
Bonne journée
Modifié par HDcms (17 May 2019 - 10:46)
Bonjour,
Woauh réponse rapide Smiley smile
Certainement quand je faisais le site à la main ... il y a très longtemps, mais là je ne peux toucher au code HTML généré. Je dois utiliser un custom css !
Administrateur
Bonjour,

Cacher de façon aussi efficace le message important, quelle drôle d'idée Smiley ohwell
Sans parler des utilisateurs·trices du clavier, ça ne fonctionne pas au touch/sur mobile, en 2019…
Au pire utiliser un bouton (i) (i cerclé, le forum veut pas de mon caractère Unicode) à côté du label qui affiche une tooltip au clic (une vraie qui reste affichée tant qu'on a pas cliqué à nouveau sur le bouton ou en dehors, je parle pas des infobulles de l'attribut title).

Là avec cette nouvelle information de ne pas pouvoir toucher au code HTML, tu peux afficher en CSS le contenu de l'attribut où se trouve l'info :
label::after {
	content: attr(data-content);
	margin-left: 1rem;
	padding: 0.2rem 0.5rem;
	font-weight: bold;
	color: darkred;
}

EDIT : documentation MDN https://developer.mozilla.org/fr/docs/Web/CSS/attr

Ce sera lu par les lecteurs d'écran modernes puisqu'ils lisent à présent les pseudo-éléments (ce n'était pas vrai il y a quelques années où le contenu généré en CSS était ignoré par eux).

Sans JS, pas moyen d'afficher cette info par dessus le champ ET de la cacher quand le champ a le focus, que l'utilisateur veut saisir quelque chose (de toutes façons, ce ne serait pas une bonne idée de masquer cette info alors que l'utilisateur est justement en train de remplir le champ et donc d'avoir besoin de l'info). De la décaler à ce moment-là non plus.
Modifié par Felipe (17 May 2019 - 12:03)
Bonjour,

J'ai optimisé pour que cela ne fonctionne que sur un libellé:
label#jform_com_fields_site_web-lbl::after {
content: attr(data-content);
margin-left: 1rem;
padding: 0.2rem 0.5rem;
font-weight: bold;
color: darkred;
}


Et je suis bien d'accord, je ne touche à rien. Je souhaitais juste rendre visible une aide importante (pour quelques champs affichés), sans que l’utilisateur est quelque chose à faire (survol) et qu'il ne se prenne pas un message d'erreur à la validation
Et bien sûr que cela fonctionne sur les principaux navigateurs et mobile (même si la proposition d'article serait moins pertinente) et cela fonctionne
Merci c'est super Smiley smile
Modifié par HDcms (17 May 2019 - 13:08)
Sujet clos
Aller à