5 Replies Latest reply: Jan 20, 2012 4:05 AM by MurraySummers RSS

    Styling scrollbars in select boxes

    ottz0 Community Member

      I have installed a select box dropdown but want to apply a style to scrollbars similar to this http://jscrollpane.kelvinluck.com/themes/lozenge/

       

      I can't find a jquery select box that does this. I found loads that has the dropdown but not the scroll. Otherwise I need to add the html <select>

       

      Does anyone know a jquery that does this? Otherwise is there now a css3 way of styling the scroll. I know there is a moz but not sure about ie

       

      thanks

        • 1. Re: Styling scrollbars in select boxes
          Nancy O. CommunityMVP

          Try this jQuery plug-in

          http://jscrollpane.kelvinluck.com/

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          • 2. Re: Styling scrollbars in select boxes
            Nancy O. CommunityMVP

            Sorry I gave you a bad link for your question.

            I'm afraid that form elements are very browser centric.  I don't know of a reliable way to style the scrollbar on a select menu. 

             

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            http://twitter.com/altweb

            • 3. Re: Styling scrollbars in select boxes
              Ben Pleysier CommunityMVP

              Only Safari and Chrome will show changes to the select element as in

               

              <!DOCTYPE HTML>
              <html>
              <head>
              <meta charset="utf-8">
              <title>Untitled Document</title>
              <style>
              select {
                -webkit-appearance: button;
                -webkit-border-radius: 2px;
                -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                -webkit-padding-end: 20px;
                -webkit-padding-start: 2px;
                -webkit-user-select: none;
                background-image: url(../images/select-arrow.png), 
                  -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;
              }
              </style>
              </head>
              
              <body>
              <label for="select1">Test</label>
              <select name="select1" id="select1">
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
                  <option>test</option>
              </select>
              </body>
              </html>
              

               

              Gramps

              • 4. Re: Styling scrollbars in select boxes
                ottz0 Community Member

                would you also go with the old SCROLLBAR-FACE-COLOR: #000000

                 

                for IE? or just not worry about ie?

                • 5. Re: Styling scrollbars in select boxes
                  MurraySummers CommunityMVP

                  I would just not worry about scrollbars. Let them be.  People are familiar with them.  Any other approach is going to get you into the business of having to come up with specific-browser solutions till you are blue in the face....