input file et styles

[Bobe]

Bonsoir,

Pour avoir la main sur l'aspect graphique d'un input d'upload de fichier, j'utilise la technique consistant à cacher celui-ci et utiliser plutôt un élément button classique relié à l'input file par un gestionnaire d'évènement.

Voici la partie permettant de masquer le input file :

Code : Tout sélectionner

if( typeof(inputFile.hidden) != 'undefined' ) {
	inputFile.hidden = true;
}
else {
	inputFile.style.position = 'absolute';
	inputFile.style.left = '9999px';
	inputFile.style.width = '0';
	inputFile.style.overflow = 'hidden';
}

Quelques questions:
- L'utilisation de l'attribut html5 'hidden' (si disponible) est-elle pertinente dans ce cas ?
- utiliser simplement display: none comme alternative peut poser problème avec certains navigateurs. Est-ce vrai ? ou peut-être que ce n'est plus d'actualité ? je n'ai eu aucun problème avec Firefox et Chrome en utilisant cette méthode.
Votre Navigateur : Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0

[Asumbaa]

Salut,

De ce que j'ai compris, l'utilisation de l'attribut hidden est tout à fait adaptée. Ça permettra à un lecteur d'écran de retrouver le bouton si besoin, contrairement à display:none qui le rend tout à fait imperceptible.
Votre Navigateur : Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0

[Bobe]

Ok, j'avais un doute sur le fait de faire interagir indirectement l'utilisateur avec un champ caché de cette manière mais cela semble validé par la documentation :

Elements that are not themselves hidden must not hyperlink to elements that are hidden. The for attributes of label and output elements that are not themselves hidden must similarly not refer to elements that are hidden. In both cases, such references would cause user confusion.

Elements and scripts may, however, refer to elements that are hidden in other contexts.

ps: d'ailleurs, on est dans un cas similaire à l'utilisation d'un input type=hidden finalement.

Votre Navigateur : Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0