Masquer la barre de défilement verticale dans l’élément

Bonjour j’ai select box avec des choix multiples et j’ai besoin de cacher la barre de défilement verticale, est-ce possible?

Okey, mais comment puis-je obtenir un effet où je peux sélectionner un élément de la liste qui a un identifiant, puis utiliser jQuery pour gérer les fonctions id.click? Quel élément dois-je utiliser alors?

C’est là que nous apprécions toute la puissance de CSS3

Violon

Je sais que ce sujet est un peu ancien, mais il y a beaucoup de réponses très précises ici, donc je voudrais fournir quelque chose de beaucoup plus simple et beaucoup plus propre:

 select { overflow-y: auto; }

Comme vous pouvez le voir dans ce violon , cette solution vous offre une certaine flexibilité si vous ne connaissez pas le nombre exact d’options que vous allez avoir. Il masque la barre de défilement dans le cas où vous n’en avez pas besoin sans cacher les éléments d’options supplémentaires possibles dans l’autre cas. Ne faites pas tous ces trucs qui se chevauchent et qui se chevauchent. Cela ne fait que créer un balisage illisible.

Non, vous ne pouvez pas contrôler l’aspect d’une boîte de sélection avec autant de détails.

Une boîte de sélection est généralement affichée sous la forme d’une liste déroulante, mais rien n’indique qu’elle doit toujours être affichée de cette manière. Son affichage dépend du système et, par exemple, sur certains téléphones portables, vous ne recevez aucune liste déroulante, mais un sélecteur couvrant la plupart ou la totalité de l’écran.

Si vous voulez contrôler à quel point vos éléments de formulaire sont si détaillés, vous devez supprimer les éléments HTML normaux de vos propres formulaires (ou trouver quelqu’un d’autre qui l’a déjà fait).

Vous pouvez utiliser un

pour couvrir la barre de défilement si vous voulez vraiment qu’elle disparaisse.
Bien que cela ne fonctionne pas sur IE6, les navigateurs modernes vous permettent de placer un

au-dessus.

Chrome (et peut-être d’autres navigateurs Webkit) uniquement:

 /* you probably want to specify the size if you're going to disable the scrollbar */ select[size]::-webkit-scrollbar { display: none; }

mon extrait de cross-browser .no-scroll:

 .no-scroll::-webkit-scrollbar {display:none;} .no-scroll::-moz-scrollbar {display:none;} .no-scroll::-o-scrollbar {display:none;} .no-scroll::-google-ms-scrollbar {display:none;} .no-scroll::-khtml-scrollbar {display:none;}

Comme l’a dit Guffa, vous ne pouvez pas obtenir autant de contrôle sur les contrôles natifs. Le meilleur moyen est probablement de créer une boîte d’éléments avec des boutons radio à côté de chaque élément, puis d’utiliser des étiquettes et du JavaScript pour rendre les «lignes» interactives. Cliquez sur un bouton radio ou une étiquette pour colorer la ligne sélectionnée.

Changer le remplissage en bas, c’est-à-dire peut-être la manière la plus simple possible.

J’ai élaboré la solution Arraxas pour:

élargir la boîte pour inclure tous les éléments
changer de fond et de couleur en vol stationnaire
obtenir et alerter la valeur sur clic
ne continue pas à sélectionner la sélection après avoir cliqué

 let selElem=document.getElementById('myselect').children[0]; selElem.size=selElem.length; selElem.value=-1; selElem.addEventListener('change', e => { alert(e.target.value); e.target.value=-1; });

 #myselect { display:inline-block; overflow:hidden; border:solid black 1px; } #myselect > select { padding:10px; margin:-5px -20px -5px -5px;"; } #myselect > select > option:hover { box-shadow: 0 0 10px 100px #4A8CF7 inset; color: white; }

Je pense que tu ne peux pas. L’élément SELECT est rendu à un point hors de scope de CSS et HTML. Est-ce grisé?

Mais vous pouvez essayer d’append un atsortingbut “taille”.