1. Accueil
  2. Question et réponse
  3. Masquer la barre de défilement verticale de plusieurs lignes SELECT dans Firefox et Chrome?

Masquer la barre de défilement verticale de plusieurs lignes SELECT dans Firefox et Chrome?

2010-07-04 2 views
8

Ce problème semblait assez simple (overflow:hidden, non?) Jusqu'à ce que je ne pouvais pas le résoudre. J'ai un simple multi-ligne SELECT avec la taille définie:Masquer la barre de défilement verticale de plusieurs lignes SELECT dans Firefox et Chrome?

<select size="10" name="elements"> 
... 
</select>

MSIE et Opera montrent que lorsque barre de défilement verticale nécessaire, mais Firefox et Chrome toujours affichage vertical dans l'état scrollbar désactivé.

J'ai essayé de définir un débordement, un débordement-y et même un débordement-x, mais rien ne fonctionne. Des idées?

Source

2010-07-04 Sergei

Répondre

-1

La seule chose que je peux penser est de chevaucher la barre de défilement en positionnant une image ou DIV solide avec un z-index supérieur droit au-dessus de la barre de défilement SELECT. Mais ce serait un hack laid.

Source

2010-07-04 03:33:01

1

Essayez ceci:

<html> 
<head> 
<style> 
div.border { 
    margin-right: 0px; 
    border-style:solid; 
     overflow:hidden; 
} 
select.hiddenscroll { 
    margin-right: -20px; 
    margin-top: -3px; 
    margin-bottom: -3px; 
    padding-right: -20px; 
     overflow:hidden; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr><td> 
    <div class="border" style="overflow:hidden;"> 
     <select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless"> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      <option>Option 4</option> 
      <option>Option 5</option> 
     </select> 
    </div> 
    <table> 
    </tr></td> 
</body> 
</html>

Source

2012-05-23 16:56:35

+0

Une brève description de la solution au problème d'OP serait meilleure. S'il vous plaît lire: http://stackoverflow.com/questions/how-to-answer – askmish

7 
<div style="overflow: hidden;"> 
<select style="width: 110% ; border: 0px;"> 
.....

Source

2013-04-14 08:25:03 mon

5

C'est un fil assez vieux maintenant, mais j'imagine que il y en a d'autres qui cherchent à répondre à la même question comme je l'ai fait. Pour les navigateurs Webkit, il existe une solution très simple grâce au fait qu'ils (Chrome et Safari) autorisent le style de la barre de défilement.

Voici une référence décente à beaucoup de choses que vous pouvez faire avec webkit scrollbars. Le CSS dont vous avez besoin ici est

select::-webkit-scrollbar{width:1px;background-color:transparent}

L'astuce est en train de faire essentiellement deux choses

  1. Faire la barre de défilement juste un pixel de large sorte qu'il ne soit pas de la manière
  2. Définissez sa couleur d'arrière-plan transprent

Si vous voulez que cela fonctionne pour un sous-ensemble de sélectionner les barres de défilement, vous devriez changer le CSS en modifiant la barre de défilement pour une classe fictive

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

puis d'utiliser cette classe pour les sélections que vous souhaitez modifier. par exemple.

<select class='subsel' id='selOne' size='4'> 
<option value='1'>Option One</option> 
<option value='2'>Option Two</option> 
</select>

Voici un violon qui montre le "enlevé" barre de défilement en action

rememebr it will only work with Webkit browsers!

Source

2013-06-23 05:55:37 DroidOS

Questions connexes

 Questions connexes