Mozilla Connect

WhiteKnight · ‎08-23-2022

Currently, in FF it's utterly hard to tell the scrollbar button from the scrollbar background:One 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:

Anonymous · ‎08-24-2022

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

Luca_Pavan · ‎08-24-2022

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.

WhiteKnight · ‎08-26-2022

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!

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

Mozilla Connect

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