CODEWITHSUNDEEP
cssmacosscrollbar
SeaBass
SeaBass

Reputation: 1764

Different looks on scrollbars when using USB mouse vs wireless/trackpad in OS X

I just realized that Mac OS X shows different scrollbars in the browsers when a USB mouse is connected or not. I tried the code below and it looks ok, but now when I disconnect the mouse it applies to the wireless settings as well, which I was happy with already (scrollbars only showing when scrolling or hovering it).

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 15px;
    background-clip: padding-box;
    border: 4px solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

Can I: 1. Write CSS for the USB mouse only? 2. Do something that makes the USB mouse look/act like the wireless mouse.

Thank you!

Upvotes: 10

Views: 3041

Answers (1)

Alessia
Alessia

Reputation: 959

Here is what I found: OSX: Remove scrollbars that appear when using a mouse

Fortunately the solution lay in the General preferences pane. All that's needed is to change "Show scroll bars" to "When scrolling" instead of "Automatically based on mouse or trackpad.

enter image description here

Conclusion: I think the solution is beyond our/developers' control. Just leave it to the user.

Upvotes: 5

Related Questions