CSS scrollbar styling
Methods of styling scrollbars' color and width.
W3C Candidate Recommendation: https://w3c.github.io/csswg-drafts/css-scrollbars-1/
Usage: 73.4% + 9.65% = 83%
Support summary
- IE: partial since 5.5, notes for version 5.51
- Edge: 121, partial since 79, prefixed since 79, notes for version 792
- Firefox: 64, available but disabled by default since 63, notes for version 634
- Chrome: 121, partial since 4, prefixed since 4, notes for version 42
- Safari: partial since 5.1, prefixed since 5.1, notes for version 5.12
- Opera: 107, partial since 15, prefixed since 15, notes for version 152
- Safari on iOS: partial since 7.0-7.1, prefixed since 7.0-7.1, notes for version 7.0-7.12, notes for version 82
- Opera Mini: Not supported
- Android Browser: partial since 2.3, prefixed since 2.3, notes for version 2.32
- Blackberry Browser: partial since 7, prefixed since 7, notes for version 72
- Opera Mobile: partial since 80, prefixed since 80, notes for version 802
- Chrome for Android: 136
- Firefox for Android: 137
- IE Mobile: Not supported
- UC Browser for Android: partial since 15.5, prefixed since 15.5, notes for version 15.52
- Samsung Internet: 25, partial since 4, prefixed since 4, notes for version 42
- QQ Browser: partial since 14.9, prefixed since 14.9, notes for version 14.92
- Baidu Browser: partial since 13.52, prefixed since 13.52, notes for version 13.522
- KaiOS Browser: Not supported
Notes
- Only supports styling scrollbar colors through proprietary prefixed properties, no other properties to define the scrollbar's appearance. (not on standards track)
↑
- Supports scrollbar styling via CSS pseudo-properties. (not on standards track)
↑
- Scrollbar styling doesn’t work in WKWebView
↑
- Can be enabled by setting the layout.css.scrollbar-colors.enabled and layout.css.scrollbar-width.enabled flags to true.
↑
- Firefox 63 supported scrollbar-face-color and scrollbar-track-color separate properties (now dropped from the spec) instead of unified scrollbar-color property.
↑
Links
Full support table
IE
Edge
| 12 | 13 | 14 | 15 | 16 | 17 | 18 | 79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |
|---|
| n | n | n | n | n | n | n | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y |
Firefox
| 2 | 3 | 3.5 | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
|---|
| n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n,d | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y |
Chrome
| 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 |
|---|
| a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y | y |
Safari
| 3.1 | 3.2 | 4 | 5 | 5.1 | 6 | 6.1 | 7 | 7.1 | 8 | 9 | 9.1 | 10 | 10.1 | 11 | 11.1 | 12 | 12.1 | 13 | 13.1 | 14 | 14.1 | 15 | 15.1 | 15.2-15.3 | 15.4 | 15.5 | 15.6 | 16.0 | 16.1 | 16.2 | 16.3 | 16.4 | 16.5 | 16.6 | 17.0 | 17.1 | 17.2 | 17.3 | 17.4 | 17.5 | 17.6 | 18.0 | 18.1 | 18.2 | 18.3 | 18.4 | 18.5 | TP |
|---|
| u | u | u | u | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x |
Opera
| 9 | 9.5-9.6 | 10.0-10.1 | 10.5 | 10.6 | 11 | 11.1 | 11.5 | 11.6 | 12 | 12.1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 60 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |
|---|
| n | n | n | n | n | n | n | n | n | n | n | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | y | y | y | y | y | y | y | y | y | y | y |
Safari on iOS
| 3.2 | 4.0-4.1 | 4.2-4.3 | 5.0-5.1 | 6.0-6.1 | 7.0-7.1 | 8 | 8.1-8.4 | 9.0-9.2 | 9.3 | 10.0-10.2 | 10.3 | 11.0-11.2 | 11.3-11.4 | 12.0-12.1 | 12.2-12.5 | 13.0-13.1 | 13.2 | 13.3 | 13.4-13.7 | 14.0-14.4 | 14.5-14.8 | 15.0-15.1 | 15.2-15.3 | 15.4 | 15.5 | 15.6-15.8 | 16.0 | 16.1 | 16.2 | 16.3 | 16.4 | 16.5 | 16.6-16.7 | 17.0 | 17.1 | 17.2 | 17.3 | 17.4 | 17.5 | 17.6-17.7 | 18.0 | 18.1 | 18.2 | 18.3 | 18.4 | 18.5 |
|---|
| u | u | u | u | u | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n |
Opera Mini
Android Browser
| 2.1 | 2.2 | 2.3 | 3 | 4 | 4.1 | 4.2-4.3 | 4.4 | 4.4.3-4.4.4 | 136 |
|---|
| u | u | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x |
Blackberry Browser
Opera Mobile
| 10 | 11 | 11.1 | 11.5 | 12 | 12.1 | 80 |
|---|
| n | n | n | n | n | n | a,x |
Chrome for Android
Firefox for Android
IE Mobile
UC Browser for Android
Samsung Internet
| 4 | 5.0-5.4 | 6.2-6.4 | 7.2-7.4 | 8.2 | 9.2 | 10.1 | 11.1-11.2 | 12.0 | 13.0 | 14.0 | 15.0 | 16.0 | 17.0 | 18.0 | 19.0 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
|---|
| a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | a,x | y | y | y |
QQ Browser
Baidu Browser
KaiOS Browser
- y = supported
- a = partially supported, see notes
- x = supported with a prefix, e.g. moz, webkit
- p = supported with a polyfill
- d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
- n = not supported
- u = unknown/untested
Back to list
Data copyright caniuse.com