28172 sujets

CSS et mise en forme, CSS3

Impossible de changer l'aspect du bouton "Choisir un fichier"

Bonjour à vous tous,

J'ai cherché sur Google et je ne trouve aucune information concernant le changement d'aspect graphique du bouton "Choisir un fichier" :
upload/1699525669-62242-capturedncran2023-11-09112710.png
Confirmez-moi, on ne peut pas changer l'aspect de ce bouton, changer la police de caractère, la taille, la couleur, etc. ?
Modifié par ObiJuanKenobi (09 Nov 2023 - 11:31)
Bonjour,
cet input de type file est propre à chaque navigateur, voilà le problème,
mais il existe des solutions alternatives,
chercher dans google :

peut on styler input type file

et des infos seront dispos
Modérateur
Bonjour,

On peut changer quelques trucs avec du css comme par exemple la taille de la police (ce qui permet de changer la taille du bouton). Mais c'est effectivement limité et dépend des navigateurs et des OS.

Si on souhaite des modifications plus radicales, on peut styler un label qui viendrait s'afficher par dessus.

Exemple : https://jsfiddle.net/parsimonhi/owzn7yj8/

Amicalement,
.vert {
display: inline;
position: relative;
left: 10px;
height: 20px;
width: 20px;
border: 2px solid #070;
background-color: #0f0;
border-radius: 10px;
overflow: hidden;
margin: auto;
}
.transparent {
opacity: 0;
width: 20px;
}


<div>
  cliquer sur le bouton vert pour choisir une image :
  <div class="vert"><input type="file" class="transparent"></div> 
</div>
Merci parsimonhi pour ton code mais je n'ai encore jamais vu ce genre de code :
input[type="file"] {
  ...
}
à quoi correspondent les crochets ?
Modifié par ObiJuanKenobi (09 Nov 2023 - 17:42)
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
à quoi correspondent les crochets ?


input[type="file"] signifie cibler les éléments html input qui ont un attribut type ayant pour valeur "file".

Amicalement,
Salut,

De mon côté je m'évertue à styler au maximum les éléments natifs, mais il faut reconnaître que c'est un brin relou.

Voir en ligne : Éléments de formulaire.

Les points clefs :
::-webkit-file-upload-button,
::file-selector-button {
  display: none;
}

input[type=file] {
  padding-right: 3em; /* évite de passer sous le bouton (qui sera ici un SVG) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z'></path></svg>");
  cursor: pointer;
}
input[type=file]:focus,
input[type=file]:hover,
input[type=file]:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='orange'><path d='M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z'></path></svg>");
}

Modifié par Olivier C (10 Nov 2023 - 04:37)
parsimonhi a écrit :
Bonjour,
input[type="file"] signifie cibler les éléments html input qui ont un attribut type ayant pour valeur "file".

Amicalement,


Cool, merci.
Tu as un lien qui explique en détail cette syntaxe ?
Modifié par ObiJuanKenobi (10 Nov 2023 - 07:01)
@bongota : oui Google est notre ami, mais il faut reconnaitre que dans ce cas ce n'est pas aussi simple. Par exemple, ta capture d'écran ne nous renvoie que sur l'élément HTML lui-même.

@ObiJuanKenobi : Pour le sélecteur CSS il faut voir ici (sur MDN, comme d'habitude) : Sélecteur d'attributs.
Prévenir un modérateur
Répondre au sujet
Aller à