1. Zuhause
  2. Frage und Antwort
  3. Versteckt vertikale Bildlaufleiste von mehrzeiligen SELECT in Firefox und Chrome?

Versteckt vertikale Bildlaufleiste von mehrzeiligen SELECT in Firefox und Chrome?

2010-07-04 17 views
8

Dieses Problem schien ziemlich einfach (overflow:hidden, richtig?), Bis ich es nicht lösen konnte. Ich habe eine einfache mehrzeiligen mit definierter Größe SELECT:Versteckt vertikale Bildlaufleiste von mehrzeiligen SELECT in Firefox und Chrome?

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

MSIE und Opera zeigen vertikale Bildlaufleiste nur bei Bedarf, aber Firefox und Chrome immer Anzeige vertikale Scrollbalken in deaktivierten Zustand.

Ich habe versucht Einstellung Überlauf, Überlauf-y und sogar Überlauf-x, aber nichts funktioniert. Irgendwelche Ideen?

Quelle

2010-07-04 Sergei

Antwort

-1

Das einzige, was ich denken kann, ist die Bildlaufleiste zu überlappen, durch ein Bild oder eine feste DIV mit einem höheren Z-Index rechts oben Positionierung der SELECT Scrollbar. Aber das wäre ein hässlicher Hack.

Quelle

2010-07-04 03:33:01

1

Try this:

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

Quelle

2012-05-23 16:56:35

+0

Eine kurze Beschreibung der Lösung des OP-Problems wäre besser. Bitte lesen Sie: http://stackoverflow.com/questions/how-to-answer – askmish

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

Quelle

2013-04-14 08:25:03 mon

5

Dies ist ein ziemlich alter Thread jetzt aber ich glaube, dass es gibt andere, die sich auf die Suche nach einer Antwort auf dieselbe Frage begeben, genau wie ich. Für Webkit-Browser gibt es eine sehr einfache Lösung dank der Tatsache, dass sie (Chrome und Safari) ermöglichen, die Bildlaufleiste zu gestalten.

Hier ist ein anständiger Verweis auf viele der Dinge, die Sie mit webkit scrollbars tun können. Die CSS Sie hier brauchen, ist

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

Der Trick im Wesentlichen zwei Dinge tut

  1. Sprechen Sie die Scrollbar nur ein Pixel breit, so dass es in der Art und Weise
  2. Legen Sie die Hintergrundfarbe nicht bekommen zu transprent

Wenn Sie dies nur für eine Teilmenge von ausgewählten Bildlaufleisten arbeiten möchten, sollten Sie die CSS ändern, indem Sie die Bildlaufleiste für eine Dummy-Klasse zu ändern

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

und dann diese Klasse für die Auswahl verwenden, die Sie so ändern möchten. z.B.

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

Hier ist eine Geige, die die „entfernt“ Scrollbar in Aktion

rememebr it will only work with Webkit browsers!

Quelle

2013-06-23 05:55:37 DroidOS

Verwandte Themen

 Verwandte Themen