topic Re: Scrollbars should clearly indicate what's the button and what's the background in Discussions

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

WhiteKnight — Tue, 23 Aug 2022 10:41:06 GMT

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:

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

Anonymous — Wed, 24 Aug 2022 08:21:34 GMT

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

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

Luca_Pavan — Wed, 24 Aug 2022 14:53:06 GMT

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.

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

WhiteKnight — Fri, 26 Aug 2022 18:55:15 GMT

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.