Styling scrollbar specifically inside a select type input with CSS

Question

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.

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.

Styling other scrollbars using webkit-scrollbar works just fine:

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

Styling the select input boxes with the following works just fine as well:

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;

}

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

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.

Everything else on the page is styled, and the default scrollbars in Chrome and IE really look out of place on the inputs.

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.

Any help or insight is appreciated.

Solution 1

The scrollbar of select dropdown can be styled by using this way:

select::-webkit-scrollbar

In order to let the css take effect, width and height properties need to be set as well. Code below shows the normal dropdown, styled dropdown but no width and height properties, and styled dropdown with width and height properties to illustrate the difference.

select {
  padding: 3px 12px;
  outline: none;
  width: 250px;
  margin-bottom: 20px;
}

select.widthHeight::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

select.style::-webkit-scrollbar-track {
  border: rgb(180, 180, 180);
  background-color: #ff6536;
}

select.style::-webkit-scrollbar-thumb {
  background-color: #3677ef;
  border: 1px solid rgb(193, 193, 193);
}

div {
  margin-bottom: 5px;
}

<div>Normal</div>
<select>
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled without width and height css</div>
<select class="style">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled</div>
<select class="style widthHeight">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

Solution 2

I'm pretty sure you cannot style the select element, or at least not very well. It would be nice to have the option to, but there are so many values I would want to alter that its just easier to create my own. Just basically make a div with clickable elements that change the value of a hidden input and that can be shown and hidden with a separate element which shows the selected value.

Personally I feel this is the best way as you have FULL control over it allowing it to be styled how you want, however, you can also use javascript UI plugins like jQuery UI that change the styles of input elements.

Solution 3

A related thought to whether to use JS and an alternate HTML markup to achieve the desired aesthetics. Would "hacking" it for the sake of aesthetics cause unwanted results on mobile browsers? On an iPad, the default functionality for a select element is to bring up a wheel of options to select. Would we not then lose that functionality by hacking the select?