简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Flèche déroulante personnalisée
P粉986937457
P粉986937457 2023-08-17 17:52:04
0
1
397

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 ; }

P粉986937457
P粉986937457

répondre à tous (1)
P粉633075725
P粉6330757252023-08-18 14:27:07 1 plancher

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

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; }
Comme+0
Ajouter une réponse
    Sujets populaires
    Plus>
    Articles populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！