- https://www.filamentgroup.com/lab/select-css.html
-
- pure css, mais pas un vrai select: https://codepen.io/himalayasingh/pen/pxKKgd
- pareil : https://codepen.io/miniven/pen/ZJydge
Solution pour remplacer le chevron par défaut par un picto encodé en base64
- Rotate an image online, clockwise or counterclockwise
- Convert WebP to Base64 online – Champ « Output Format »: CSS Background Image — background-image:url(). Il peut arriver que les double quotes
"
(dansurl("data:image/webp;base64,...");
) posent problème dans certains CMS. Il suffit de les retirer. Ne pas oublier également d’ajouter un caractère;
à la fin de la ligne générée.
Code CSS à mettre en place:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; //border: none; line-height: 1.3; padding: .6em 1.4em .5em .8em; //font-size: 1.4rem; background-color: transparent; background-image: url(data:image/webp;base64,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); background-position: right 10px top 50%; background-repeat: no-repeat; background-size: contain; } |