cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Scrollbars should clearly indicate what's the button and what's the background

WhiteKnight
Making moves

Currently, in FF it's utterly hard to tell the scrollbar button from the scrollbar background:Scrollbar.pngOne has to randomly click somewhere in the scrollbar to be able to tell button from background.

Thus, I propose to add at least a top highlight line and a bottom shadow line to the scrollbar button to clearly indicate the difference, like in this sketch:

Scrollbar - 2.png

3 REPLIES 3

Anonymous
Not applicable

Not 100% sure, but maybe this can be done with themes?

Luca_Pavan
Contributor

Scrolling button is darker that scrollbar, but looks like you can change its colour, I searched for firefox scrollbar styling and soon found some interesting stuff, maybe give it a check, you'd be able to darken it if you prefer. Then usually popup menues like the one you showed are opened with scrolling button at the beginning of the menu and then you can scroll any menu singularly by hovering over it with the cursor and scroll with the mouse wheel.

I rather would appreciate if the default stylesheet shipped with Firefox came with a more clear and accessible default design for scroll bars.

See this simple example:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body style="background-color: #a6a6a6;">
      <select name="" id="" multiple="multiple" style="width: 10em; height: 20em;">
        <option value="1">abc</option>
        <option value="2">abc</option>
        <option value="3">abc</option>
        <option value="4">abc</option>
        <option value="5">abc</option>
        <option value="6">abc</option>
        <option value="7">abc</option>
        <option value="8">abc</option>
        <option value="9">abc</option>
        <option value="10">abc</option>
        <option value="11">abc</option>
        <option value="12">abc</option>
        <option value="13">abc</option>
        <option value="14">abc</option>
        <option value="15">abc</option>
        <option value="16">abc</option>
        <option value="17">abc</option>
      </select>
  </body>

</html>

 

And here's the challenge: Find the scrollbar button in below screenshot!

FF.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This is a very undesired situation, particularly for applications like creating documentation and for visually impaired users.