Styliser des éléments de formulaire

Ah ! ces éléments remplacés que sont les éléments de formulaire...

On croit avoir trouvé la panacée pour changer leurs styles CSS puis, sur une MAJ d'un navigateur, on s’aperçoit que ce dernier à changé les règles (ajout ou suppression d'une petite icône dans un input, etc). En plus, pour un même navigateur (ex : Chrome), l'input n'a pas la même apparence sur mobile que sur desktop...

J'ai bien tenté de jouer sur les ::-webkit-datetime-edit-fields-wrapper et autres ::-webkit-calendar-picker-indicator, mais pour Firefox, nop : pas de sélecteurs en vue :

https://codepen.io/olivier-c/pen/jOwPrWo

Souvent, le patch ultime est de positionner un élément ou un pseudo-élément** pour cacher l'éventuelle icône. En 2024, nous en sommes toujours là ? :

https://scriptura.github.io/app/UA0/

Et vous ? Comment faites-vous ?

____
** Mais pour ce dernier cas, pas sur l'input lui-même qui, en tant qu'élément remplacé, n'est pas censé supporter les pseudo-éléments.
Modifié par Olivier C (02 Nov 2024 - 11:57)

Bonjour,

Olivier C a écrit :
Et vous ? Comment faites-vous ?

Je maudis le W3C et les développeurs de navigateurs, et je style au minimum.

Amicalement,

parsimonhi a écrit :

Je maudis le W3C et les développeurs de navigateurs, et je style au minimum.

Moi je ne fait plus que des pages blanches (#fff), sans rien dedans.
Modifié par drphilgood (03 Nov 2024 - 13:40)

Bonjour,

drphilgood a écrit :
Moi je ne fait plus que des pages blanches (#fff), sans rien dedans.

Le #fff est surement de trop !

Amicalement,

salut
je me réferait au sujet d'olivier C

https://forum.alsacreations.com/topic-9-91190-1-Le-fond-de-ton-site-nest-pas-FFF-par-defaut-.html

@drphilgood : bien vu !

Pour revenir sur le sujet : y en a-t-il parmi vous qui utilisent des lib's ou un truc du genre ?

ben non.

Bonjour,

drphilgood a écrit :
je me réferait au sujet d'olivier C

https://forum.alsacreations.com/topic-9-91190-1-Le-fond-de-ton-site-nest-pas-FFF-par-defaut-.html

Je ne suis pas intervenu sur le sujet d'Olivier, mais si je l'avais fait, j'aurais sans doute justement conseillé de ne pas essayer d'imposer le #fff.

Amicalement,

Pour info, sur iOs, les champs sans valeur, on une hauteur égale à l'icone.

tu peux mettre ton input date dans une div que tu style comme tes autres input (bordures padding etc..), et en lui appliquant un overflow hidden. Et tu appliques à ton input une largeur un peu plus grande que 100%, histoire que l'icone soit masqué. Au moins ça fonctionnera partout.

Sinon la solution d'une lib datepicker effectivement

@Pedrothelion : oui, c'est à peu près la solution que j'utilise pour les cas où je consens à sortir le bazooka.
Modifié par Olivier C (13 Nov 2024 - 12:53)