28172 sujets

CSS et mise en forme, CSS3

Titre complet : Positionner le bouton "parcourir" du champ de réception de l'input "file'
Bonsoir,

Je reste stoïque : le bouton "parcourir" est-il automatiquement associé à input="file" dans les formulaires de téléchargement sans qu'on puisse en changer la disposition ? Exemple :
<form enctype="multipart/form-data" method="post">
   <input type="file" name="file[]" size="40">
</form>

C'est laid, le bouton reste collé au champ texte. Où voyez-vous une possibilité de l'écarter ou le placer en dessous ?
Et comment changer de texte (exemple encore) "chercher sur votre ordinateur" au lieu de "parcourir" ?

Ça doit bien exister puisque je le vois sur pas mal de sites (notamment sur alsacréations ou il est placé en dessous)
Modifié par Aureance (24 Mar 2010 - 19:39)
Errata :

Le bouton placé en bas, j'ai du le rêver… Sur Alsacréations, c'est comme sur les autres sites, il est placé tel qu'il est suivant les navigateurs :
N'y a t'il aucune possibilité de personnaliser la présentation ? (HTML + CSS uniquement)
upload/579-file.jpg
Hello,

Le rendu de cet input est vraiment dépendant du navigateur et on ne peut rien y faire (c'est le cas de tous les éléments de formulaire, mais celui-là est particulièrement retors).

Il y a des questions de sécurités assez importantes sur l'élément input="file" (l'impossibilité de modifier la valeurpar exemple) qui forcent un peu les navigateurs à rester dans les affichages par défaut pour éviter qu'on puisse tromper l'utilisateur.

Les seules solutions sont à base de Javascript, on masque l'élément file normal, on créé un joli bouton à la place (ou bouton + input text) et on associe manuellement les events click, focus, etc
Bon, c'est pas grave, ça restera comme c'est. Je préfère que ça reste vilain à voir plutôt que d'envisager la solution javascript (bien que l'exemple mis en démo soit très agréable à l'œil). Salut et merci à vous deux pour les réponses.