28111 sujets

CSS et mise en forme, CSS3

Mise en forme d'un input type=file

Salut à tous, et bonne année puisque je ne suis pas revenu depuis l'année derniere Smiley cligne

J'ai un petit problème en ce moment, je travaille sur un petit formulaire d'envoi de newsletter, et j'ai un soucis avec la mise en forme des champs. En effet, apparemment les champs input type='file' (choix d'un fichier avec le bouton parcourir) ne prennent pas le style des autres input ! Smiley eek

Est-ce que quelqu'un à déjà rencontré ce problème et saurait m'aider ??
Merci d'avance,


PierreAd


PS : je joins une capture du formulaire pour vous montrer a quel point c'est moche.... Smiley decu

PPS : les contours en rouge c'est web developper, c'est pas propre au formulaire Smiley ravi
Modifié par PierreAd (22 May 2017 - 22:02)
Merci de cette réponse rapide,

Je suis en train de regarder l'article que tu m'as indiqué, c'est intéressant... mais c'est vraiment de la bidouille comme tu dis Smiley biggol

C'est quand même assez problématique ce comportement des input file... au pire je ferai en sorte que ma règle pour les input ne concerne pas les input file....

Merci en tout cas



PierreAd


Edit : a défaut de styler le bouton lui-même, est il possible de styler le champ qui l'accompagne ??? je suppose que la réponse est non... mais ce serait déjà un début (au moins pour avoir une largeur des champs uniforme sur mon formulaire)
Modifié par PierreAd (11 Jan 2006 - 12:06)
Nan nan rassure toi, le champ de texte lui est parfaitement stylisable (hum :x) au même titre qu'un input text. Ainsi tu peux modifier son bg, police et bordure ainsi que sa largeur.
Par contre cette dernière englobe le bouton il faut donc faire quelques ajustements.

Bonne continuation et n'oublie le [Résolu] ; )
Hum... Le champ de texte parfaitement stylisable ??? Par quoi faut-il passer à ce moment là ?? Car en appliquant le style sur input, la partie texte du input file ne prenait pas le style....

J'espère bientôt pouvoir mettre résolu Smiley cligne
Hum,

Je serais curieux de voir ton code, pcq en effet il suffit de passer par la redéfinition des éléments input.
Oh !

Bon eh bien je vais essayer de jeter à nouveau un oeil à mon code... pourtant ma css est assez simple, elle ne concerne que ce formulaire.... je regarderai cela en début d'apres midi, et si vraiment je ne vois pas, je te tiens au courant !

Merci encore de ton aide,


PierreAd
Salut à tous,

Me revoila avec mon problème, toujours le même !!! En fait le problème n'était pas propre a mon code mais apparemment à firefox, et concernait surtout l'attribut width : en effet, le champ input file semble avoir sous FF une largeur fixe. Si on spécifie une autre largeur, le champ lui même est complété par du "vide"....

Je ne sais pas si je suis très clair, voici trois screenshots du même formulaire :
Version FF >>
Version IE >>
Version Opera >>


Voilà... Si jamais d'autres personnes savent des choses là dessus, n'hésitez pas ! merci de votre aide !
Modifié par PierreAd (23 May 2017 - 09:19)
Re Smiley cligne

En fait un problème persiste : il existe un petit décalage entre le premier champ (texte) et les autres champs (file). Dans ma feuille de style, les éléments input sont définis ainsi :


form p {
width:90%;
text-align:right;
}

p input {
width:65%;
margin-left:3em;
}


Ce décrochage apparait sous les 3 navigateurs avec lesquels j'ai testé le formulaire, il s'agit certainement d'un oubli de ma part Smiley confused

Je vais chercher un peu de mon côté, si vous avez des idées je suis néanmoins preneur Smiley biggrin


PierreAd
Modérateur
Hello,

Je ressors ce sujet car je regardais justement les différentes méthodes pour styler les éléments de formulaires et en effet, il est bien difficile d'obtenir des exemples pleinement accessibles, pour ne pas dire impossible.

Du coup, je pense que, si on souhaite quand même mettre un style différent, on devrait appliquer tous les styles via JS et donner la possibilité de les désactiver pour retrouver un affichage normal... ce qui minimiserait les désagréments...
Modifié par koala64 (09 Dec 2006 - 22:43)
Sujet clos
Aller à