Databases
StackOverflow2013
Postsdbo
POStyling scrollbar specifically inside a select type input with CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling scrollbar specifically inside a select type input with CSS
    text
    copied!<p>Have a site that is styled using JQuery and CSS. Using a form to gather input for a search and having a problem with the select boxes and scrollbars.</p> <p>I am primarily developing this for Chrome, and for IE. Right now I am concerned with Chrome, but a cross-platform solution would be nice.</p> <p>Styling other scrollbars using webkit-scrollbar works just fine:</p> <pre><code>::-webkit-scrollbar { width: 10px; height: 10px; } </code></pre> <p>Styling the select input boxes with the following works just fine as well:</p> <pre><code>select { -webkit-appearance: button; -webkit-border-radius: 2px; /*-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/ -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; color: #555; font-size: inherit; margin: 0; overflow: hidden; padding-top: 2px; padding-bottom: 2px; text-overflow: ellipsis; white-space: nowrap; } </code></pre> <p>What I cannot seem to bring together is the styling of the specific scrollbar that appears when you click the select input (when enough items are present to cause the scrollbar).</p> <p>It has no element obviously and I have no idea if it can really be styled or not. JQuery might be an option, but I don't want to overload the page with plugin after plugin.</p> <p>Everything else on the page is styled, and the default scrollbars in Chrome and IE really look out of place on the inputs.</p> <p>I realize creating my own dropdown box and populating a hidden input field could be a way to go, but it seems rather inelegant given how flexible HTML5 and CSS3 is supposed to be, and would be more work and JQuery to add into the page.</p> <p>Any help or insight is appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload