28172 sujets

CSS et mise en forme, CSS3

Bonjour à vous,

Il existe apparemment plusieurs méthodes pour faire des boutons radios en CSS. Sans les avoir toutes vues, j'ai l'impression que toutes passent par une invisibilité de l'objet input radio, par un display:none le plus souvent, parfois via une transparence complète.

Mais il semble que rendre invisible par "display:none" ce groupe de boutons radios rend également invisible l'infobulle d'avertissement d'une obligation par l'attribut "required". Si je rétablis la visibilité du bouton radio classique, cette infobulle réapparait, ce qui tend à confirmer le lien de ce problème avec l'invisibilité de l'input.

N'étant pas un expert en CSS, je cherche beaucoup et partout, mais peut-être trop et aux mauvais endroits. La bonne nouvelle est que la fonction html n'envoie effectivement pas le contenu (du moins avec la plupart des navigateurs) mais l'utilisateur ne sait pas pourquoi. Y-a-t-il une solution pour rétablir cette infobulle bien pratique, ou en réaliser une ? Grand merci d'avance à la bonne âme qui m'indiquerait une solution.

Et bonne journée à tous.
Administrateur
Bonjour,

nous ne cachons pas le bouton radio mais superposons les styles personnalisés par dessus celui-ci. Visible ici : KNACSS v7 – checkbox et radio
Inspiré de la méthode popularisée par Filament group démo / article

Contrainte (ou avantage induit Smiley langue ) le bouton radio doit être plus grand que celui d'origine (OS X et iOS iPad (ou iPhone ?) s'amusent à décaler l'un par rapport à l'autre d'1px leur radio ; il faut tenir compte du zoom système de Win 10 souvent actif sur les portables full HD – je parle du zoom système dans Paramètres / Affichage / 150% pas d'un navigateur)
Modifié par Felipe (09 Mar 2018 - 11:23)
Modérateur
Salut,

+1 pour Felipe, par contre le opacity:0; n'a d'effet que que le radio bouton et pas sur la bulle (contrairement au display:none;) donc il suffit de le rendre totalement invisible, de rajouter son bouton perso par dessus et hop on garde la bulle sans de soucis de ratio ou de taille plus grande etc. non ?
Meilleure solution
Modérateur
Ou juste le décaler de quelques pixels pour le cacher dans un élément en overflow hidden.

et par rapport à l'article de Felipe le CSS :checked permet aujourd'hui de styler tout ça sans un goutte de js. (comme le fait KNACSS)
Merci beaucoup Felipe + _laurent + kustolovic (dans l'ordre chronologique des réponses).

Je vais creuser dans ce domaine. Comme souvent, la solution est là où je n'avais pas encore cherché.

Je reste à l'écoute et souhaite à tous une bonne fin de journée, un bon week end.
Bonjour, la solution de _laurent fonctionne sans problème, et je retrouve mes infobulles. Merci encore à tous. Et bon week end.