W3cubDocs

/Support Tables

CSS scrollbar styling

Methods of styling scrollbars' color and width.

Spec https://w3c.github.io/csswg-drafts/css-scrollbars-1/
Status Unofficial / Note
IE Edge Firefox Chrome Safari Opera
      108 (2,*)    
    107 (6) 107 (2,*) TP (2,*)  
    106 (6) 106 (2,*) 16.1 (2,*)  
11 (1) 105 (2,*) 105 (6) 105 (2,*) 16.0 (2,*) 91 (2,*)
10 (1) 104 (2,*) 104 (6) 104 (2,*) 15.6 (2,*) 90 (2,*)
9 (1) 103 (2,*) 103 (6) 103 (2,*) 15.5 (2,*) 89 (2,*)
8 (1) 102 (2,*) 102 (6) 102 (2,*) 15.4 (2,*) 88 (2,*)
Show all
7 (1) 101 (2,*) 101 (6) 101 (2,*) 15.2-15.3 (2,*) 87 (2,*)
6 (1) 100 (2,*) 100 (6) 100 (2,*) 15.1 (2,*) 86 (2,*)
5.5 (1) 99 (2,*) 99 (6) 99 (2,*) 15 (2,*) 85 (2,*)
  98 (2,*) 98 (6) 98 (2,*) 14.1 (2,*) 84 (2,*)
  97 (2,*) 97 (6) 97 (2,*) 14 (2,*) 83 (2,*)
  96 (2,*) 96 (6) 96 (2,*) 13.1 (2,*) 82 (2,*)
  95 (2,*) 95 (6) 95 (2,*) 13 (2,*) 81 (2,*)
  94 (2,*) 94 (6) 94 (2,*) 12.1 (2,*) 80 (2,*)
  93 (2,*) 93 (6) 93 (2,*) 12 (2,*) 79 (2,*)
  92 (2,*) 92 (6) 92 (2,*) 11.1 (2,*) 78 (2,*)
  91 (2,*) 91 (6) 91 (2,*) 11 (2,*) 77 (2,*)
  90 (2,*) 90 (6) 90 (2,*) 10.1 (2,*) 76 (2,*)
  89 (2,*) 89 (6) 89 (2,*) 10 (2,*) 75 (2,*)
  88 (2,*) 88 (6) 88 (2,*) 9.1 (2,*) 74 (2,*)
  87 (2,*) 87 (6) 87 (2,*) 9 (2,*) 73 (2,*)
  86 (2,*) 86 (6) 86 (2,*) 8 (2,*) 72 (2,*)
  85 (2,*) 85 (6) 85 (2,*) 7.1 (2,*) 71 (2,*)
  84 (2,*) 84 (6) 84 (2,*) 7 (2,*) 70 (2,*)
  83 (2,*) 83 (6) 83 (2,*) 6.1 (2,*) 69 (2,*)
  81 (2,*) 82 (6) 81 (2,*) 6 (2,*) 68 (2,*)
  80 (2,*) 81 (6) 80 (2,*) 5.1 (2,*) 67 (2,*)
  79 (2,*) 80 (6) 79 (2,*) 5 66 (2,*)
  18 79 (6) 78 (2,*) 4 65 (2,*)
  17 78 (6) 77 (2,*) 3.2 64 (2,*)
  16 77 (6) 76 (2,*) 3.1 63 (2,*)
  15 76 (6) 75 (2,*)   62 (2,*)
  14 75 (6) 74 (2,*)   60 (2,*)
  13 74 (6) 73 (2,*)   58 (2,*)
  12 73 (6) 72 (2,*)   57 (2,*)
    72 (6) 71 (2,*)   56 (2,*)
    71 (6) 70 (2,*)   55 (2,*)
    70 (6) 69 (2,*)   54 (2,*)
    69 (6) 68 (2,*)   53 (2,*)
    68 (6) 67 (2,*)   52 (2,*)
    67 (6) 66 (2,*)   51 (2,*)
    66 (6) 65 (2,*)   50 (2,*)
    65 (6) 64 (2,*)   49 (2,*)
    64 (6) 63 (2,*)   48 (2,*)
    63 (4,5) 62 (2,*)   47 (2,*)
    62 61 (2,*)   46 (2,*)
    61 60 (2,*)   45 (2,*)
    60 59 (2,*)   44 (2,*)
    59 58 (2,*)   43 (2,*)
    58 57 (2,*)   42 (2,*)
    57 56 (2,*)   41 (2,*)
    56 55 (2,*)   40 (2,*)
    55 54 (2,*)   39 (2,*)
    54 53 (2,*)   38 (2,*)
    53 52 (2,*)   37 (2,*)
    52 51 (2,*)   36 (2,*)
    51 50 (2,*)   35 (2,*)
    50 49 (2,*)   34 (2,*)
    49 48 (2,*)   33 (2,*)
    48 47 (2,*)   32 (2,*)
    47 46 (2,*)   31 (2,*)
    46 45 (2,*)   30 (2,*)
    45 44 (2,*)   29 (2,*)
    44 43 (2,*)   28 (2,*)
    43 42 (2,*)   27 (2,*)
    42 41 (2,*)   26 (2,*)
    41 40 (2,*)   25 (2,*)
    40 39 (2,*)   24 (2,*)
    39 38 (2,*)   23 (2,*)
    38 37 (2,*)   22 (2,*)
    37 36 (2,*)   21 (2,*)
    36 35 (2,*)   20 (2,*)
    35 34 (2,*)   19 (2,*)
    34 33 (2,*)   18 (2,*)
    33 32 (2,*)   17 (2,*)
    32 31 (2,*)   16 (2,*)
    31 30 (2,*)   15 (2,*)
    30 29 (2,*)   12.1
    29 28 (2,*)   12
    28 27 (2,*)   11.6
    27 26 (2,*)   11.5
    26 25 (2,*)   11.1
    25 24 (2,*)   11
    24 23 (2,*)   10.6
    23 22 (2,*)   10.5
    22 21 (2,*)   10.0-10.1
    21 20 (2,*)   9.5-9.6
    20 19 (2,*)   9
    19 18 (2,*)    
    18 17 (2,*)    
    17 16 (2,*)    
    16 15 (2,*)    
    15 14 (2,*)    
    14 13 (2,*)    
    13 12 (2,*)    
    12 11 (2,*)    
    11 10 (2,*)    
    10 9 (2,*)    
    9 8 (2,*)    
    8 7 (2,*)    
    7 6 (2,*)    
    6 5 (2,*)    
    5 4 (2,*)    
    4      
    3.6      
    3.5      
    3      
    2      
Safari on iOS Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser KaiOS Browser
16.1                        
16.0 all 105 (2,*) 10 (2,*) 64 (2,*) 105 (2,*) 104 11 13.4 (2,*) 18.0 (2,*) 13.1 (2,*) 13.18 (2,*) 2.5
15.6   4.4.3-4.4.4 (2,*) 7 (2,*) 12.1     10   17.0 (2,*)      
15.5   4.4 (2,*)   12         16.0 (2,*)      
15.4   4.2-4.3 (2,*)   11.5         15.0 (2,*)      
Show all
15.2-15.3   4.1 (2,*)   11.1         14.0 (2,*)      
15.0-15.1   4 (2,*)   11         13.0 (2,*)      
14.5-14.8   3 (2,*)   10         12.0 (2,*)      
14.0-14.4   2.3 (2,*)             11.1-11.2 (2,*)      
13.4-13.7 (2,3,*)   2.2             10.1 (2,*)      
13.3 (2,3,*)   2.1             9.2 (2,*)      
13.2 (2,3,*)                 8.2 (2,*)      
13.0-13.1 (2,3,*)                 7.2-7.4 (2,*)      
12.2-12.5 (2,3,*)                 6.2-6.4 (2,*)      
12.0-12.1 (2,3,*)                 5.0-5.4 (2,*)      
11.3-11.4 (2,3,*)                 4 (2,*)      
11.0-11.2 (2,3,*)                        
10.3 (2,3,*)                        
10.0-10.2 (2,3,*)                        
9.3 (2,3,*)                        
9.0-9.2 (2,3,*)                        
8.1-8.4 (2,3,*)                        
8 (2,3,*)                        
7.0-7.1 (2,*)                        
6.0-6.1                        
5.0-5.1                        
4.2-4.3                        
4.0-4.1                        
3.2                        

Notes

  1. Only supports styling scrollbar colors through proprietary prefixed properties, no other properties to define the scrollbar's appearance. (not on standards track)

  2. Supports scrollbar styling via CSS pseudo-properties. (not on standards track)

  3. Scrollbar styling doesn’t work in WKWebView

  4. Can be enabled by setting the layout.css.scrollbar-colors.enabled and layout.css.scrollbar-width.enabled flags to true.

  5. Firefox 63 supported scrollbar-face-color and scrollbar-track-color seperate properties (now dropped from the spec) instead of unified scrollbar-color property.

  6. Firefox neither supports light and dark values of scrollbar-color nor <length> values of scrollbar width

* Partial support with prefix.

Bugs

  • In Firefox 64, scrollbar-color:auto resolves to two colors rather than auto itself

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-scrollbar