28172 sujets

CSS et mise en forme, CSS3

Retiré les flèche d'un select

salut quelquun sais comment on fait pour retirer les fleche dun select svp
jai deja teste avec webkit et apparence none mais sa fonctionne pas
Modérateur
Bonjour,

Styler les <select> (comme les autres balises de formulaire), c'est toujours un peu délicat.

Tu peux (quand même) essayer "appearance: none" dans le css.

Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.25em;
}
</style>
</head>
<body>
<select>
  <option>Rouge</option>
  <option>Vert</option>
  <option>Bleu</option>
</select>
</body>
</html>

Amicalement,
Modifié par parsimonhi (24 Dec 2021 - 12:19)
Bonjour c'est exactement ce que j'ai écrit mais il ne le fait pas , parcontre si je le fait sur u éditeur en ligne il le retire ...
Bonsoir. Comme le dit parsimonhi il faut supprimer le style par défaut du select :
select {
  -webkit-appearance: none; /* @affected Chrome */
  -moz-appearance: none; /* @affected Firefox */
}

Ensuite, par exemple, on peut ajouter une image qui nous convienne :
select:not([multiple]) {
    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='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/></svg>);
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    background-position: calc(100% - 0.4em) 50%;
}
select:not([multiple]):focus,
select:not([multiple]):hover {
    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='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/></svg>);
}
select:not([multiple]):active {
    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='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/></svg>);
}


Si ça fonctionne en ligne mais pas sur vos tests en local, vous avez forcément un problème d'appel à votre feuille de style. Il faut commencer à regarder par là.
Modifié par Olivier C (25 Dec 2021 - 02:01)
rebonjour , jai verifier pour voir si c'est pb d'appel de css mais non car jai mis un background et il le prend en compte , jaimerais quil n'y es juste simplement pas les fleche ou plutot quil soit pas visible je ne veux pas le remplacer par une image ou autre
 
select {
	appearance: none;
	-webkit-appearance: none !important;
	-moz-appearance: none;
	background-color: blue;
}

Modifié par SamDesgn (25 Dec 2021 - 02:28)
Ok. Dans ce cas il doit y avoir une règle CSS avec plus de poids que la votre, qui outrepasse même le !important. Mais sans voir le code...

Joyeux Noël !
Sujet clos
Aller à