Flèche déroulante personnalisée

Question

Est-il possible de remplacer la flèche déroulante de la balise de sélection par une flèche personnalisée composée de 4 éléments. Je veux que cela ressemble à ceci : 3 lignes horizontales à gauche et une flèche vers le bas à droite

J'ai réussi à obtenir cet effet avec un seul élément (une ligne horizontale)

.select-wrapper::before {
        contenu : "" ;
        position : absolue ;
        haut : 50 % ;
        bloc de visualisation;
        largeur : 9px ;
        hauteur : 2px ;
        fond : noir ;
    }

Answer 1

Je pense que vous souhaitez obtenir un effet similaire à ce CodePen. Le code provient presque entièrement de la réponse de SVNM à cette question

Modifier à partir de cette réponse

• Utilisez une image pour créer les lignes/flèches que vous décrivez, ce serait peut-être mieux si vous savez utiliser SVG
• Positionnement et dimensionnement des images d'arrière-plan

Exemple HTML

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

CSS

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("https://paul7dxb.github.io/hosted-assets/SomePNGs/arrow.png");
  background-repeat: no-repeat;
  background-size: 40px 20px;
  background-position-x: 80%;
  background-position-y: 50%;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}