CSS scrollbar styling

Methods of styling scrollbars' color and width.

Spec	https://w3c.github.io/csswg-drafts/css-scrollbars-1/
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
		147	144
		146	143	TP (2,*)
		145	142	26.1 (2,*)
11 (1)	141	144	141	26.0 (2,*)	122
10 (1)	140	143	140	18.5-18.6 (2,*)	121
9 (1)	139	142	139	18.4 (2,*)	120
8 (1)	138	141	138	18.3 (2,*)	119
Show all
7 (1)	137	140	137	18.2 (2,*)	118
6 (1)	136	139	136	18.1 (2,*)	117
5.5 (1)	135	138	135	18.0 (2,*)	116
	134	137	134	17.6 (2,*)	115
	133	136	133	17.5 (2,*)	114
	132	135	132	17.4 (2,*)	113
	131	134	131	17.3 (2,*)	112
	130	133	130	17.2 (2,*)	111
	129	132	129	17.1 (2,*)	110
	128	131	128	17.0 (2,*)	109
	127	130	127	16.6 (2,*)	108
	126	129	126	16.5 (2,*)	107
	125	128	125	16.4 (2,*)	106 (2,*)
	124	127	124	16.3 (2,*)	105 (2,*)
	123	126	123	16.2 (2,*)	104 (2,*)
	122	125	122	16.1 (2,*)	103 (2,*)
	121	124	121	16.0 (2,*)	102 (2,*)
	120 (2,*)	123	120 (2,*)	15.6 (2,*)	101 (2,*)
	119 (2,*)	122	119 (2,*)	15.5 (2,*)	100 (2,*)
	118 (2,*)	121	118 (2,*)	15.4 (2,*)	99 (2,*)
	117 (2,*)	120	117 (2,*)	15.2-15.3 (2,*)	98 (2,*)
	116 (2,*)	119	116 (2,*)	15.1 (2,*)	97 (2,*)
	115 (2,*)	118	115 (2,*)	15 (2,*)	96 (2,*)
	114 (2,*)	117	114 (2,*)	14.1 (2,*)	95 (2,*)
	113 (2,*)	116	113 (2,*)	14 (2,*)	94 (2,*)
	112 (2,*)	115	112 (2,*)	13.1 (2,*)	93 (2,*)
	111 (2,*)	114	111 (2,*)	13 (2,*)	92 (2,*)
	110 (2,*)	113	110 (2,*)	12.1 (2,*)	91 (2,*)
	109 (2,*)	112	109 (2,*)	12 (2,*)	90 (2,*)
	108 (2,*)	111	108 (2,*)	11.1 (2,*)	89 (2,*)
	107 (2,*)	110	107 (2,*)	11 (2,*)	88 (2,*)
	106 (2,*)	109	106 (2,*)	10.1 (2,*)	87 (2,*)
	105 (2,*)	108	105 (2,*)	10 (2,*)	86 (2,*)
	104 (2,*)	107	104 (2,*)	9.1 (2,*)	85 (2,*)
	103 (2,*)	106	103 (2,*)	9 (2,*)	84 (2,*)
	102 (2,*)	105	102 (2,*)	8 (2,*)	83 (2,*)
	101 (2,*)	104	101 (2,*)	7.1 (2,*)	82 (2,*)
	100 (2,*)	103	100 (2,*)	7 (2,*)	81 (2,*)
	99 (2,*)	102	99 (2,*)	6.1 (2,*)	80 (2,*)
	98 (2,*)	101	98 (2,*)	6 (2,*)	79 (2,*)
	97 (2,*)	100	97 (2,*)	5.1 (2,*)	78 (2,*)
	96 (2,*)	99	96 (2,*)	5	77 (2,*)
	95 (2,*)	98	95 (2,*)	4	76 (2,*)
	94 (2,*)	97	94 (2,*)	3.2	75 (2,*)
	93 (2,*)	96	93 (2,*)	3.1	74 (2,*)
	92 (2,*)	95	92 (2,*)		73 (2,*)
	91 (2,*)	94	91 (2,*)		72 (2,*)
	90 (2,*)	93	90 (2,*)		71 (2,*)
	89 (2,*)	92	89 (2,*)		70 (2,*)
	88 (2,*)	91	88 (2,*)		69 (2,*)
	87 (2,*)	90	87 (2,*)		68 (2,*)
	86 (2,*)	89	86 (2,*)		67 (2,*)
	85 (2,*)	88	85 (2,*)		66 (2,*)
	84 (2,*)	87	84 (2,*)		65 (2,*)
	83 (2,*)	86	83 (2,*)		64 (2,*)
	81 (2,*)	85	81 (2,*)		63 (2,*)
	80 (2,*)	84	80 (2,*)		62 (2,*)
	79 (2,*)	83	79 (2,*)		60 (2,*)
	18	82	78 (2,*)		58 (2,*)
	17	81	77 (2,*)		57 (2,*)
	16	80	76 (2,*)		56 (2,*)
	15	79	75 (2,*)		55 (2,*)
	14	78	74 (2,*)		54 (2,*)
	13	77	73 (2,*)		53 (2,*)
	12	76	72 (2,*)		52 (2,*)
		75	71 (2,*)		51 (2,*)
		74	70 (2,*)		50 (2,*)
		73	69 (2,*)		49 (2,*)
		72	68 (2,*)		48 (2,*)
		71	67 (2,*)		47 (2,*)
		70	66 (2,*)		46 (2,*)
		69	65 (2,*)		45 (2,*)
		68	64 (2,*)		44 (2,*)
		67	63 (2,*)		43 (2,*)
		66	62 (2,*)		42 (2,*)
		65	61 (2,*)		41 (2,*)
		64	60 (2,*)		40 (2,*)
		63 (4,5)	59 (2,*)		39 (2,*)
		62	58 (2,*)		38 (2,*)
		61	57 (2,*)		37 (2,*)
		60	56 (2,*)		36 (2,*)
		59	55 (2,*)		35 (2,*)
		58	54 (2,*)		34 (2,*)
		57	53 (2,*)		33 (2,*)
		56	52 (2,*)		32 (2,*)
		55	51 (2,*)		31 (2,*)
		54	50 (2,*)		30 (2,*)
		53	49 (2,*)		29 (2,*)
		52	48 (2,*)		28 (2,*)
		51	47 (2,*)		27 (2,*)
		50	46 (2,*)		26 (2,*)
		49	45 (2,*)		25 (2,*)
		48	44 (2,*)		24 (2,*)
		47	43 (2,*)		23 (2,*)
		46	42 (2,*)		22 (2,*)
		45	41 (2,*)		21 (2,*)
		44	40 (2,*)		20 (2,*)
		43	39 (2,*)		19 (2,*)
		42	38 (2,*)		18 (2,*)
		41	37 (2,*)		17 (2,*)
		40	36 (2,*)		16 (2,*)
		39	35 (2,*)		15 (2,*)
		38	34 (2,*)		12.1
		37	33 (2,*)		12
		36	32 (2,*)		11.6
		35	31 (2,*)		11.5
		34	30 (2,*)		11.1
		33	29 (2,*)		11
		32	28 (2,*)		10.6
		31	27 (2,*)		10.5
		30	26 (2,*)		10.0-10.1
		29	25 (2,*)		9.5-9.6
		28	24 (2,*)		9
		27	23 (2,*)
		26	22 (2,*)
		25	21 (2,*)
		24	20 (2,*)
		23	19 (2,*)
		22	18 (2,*)
		21	17 (2,*)
		20	16 (2,*)
		19	15 (2,*)
		18	14 (2,*)
		17	13 (2,*)
		16	12 (2,*)
		15	11 (2,*)
		14	10 (2,*)
		13	9 (2,*)
		12	8 (2,*)
		11	7 (2,*)
		10	6 (2,*)
		9	5 (2,*)
		8	4 (2,*)
		7
		6
		5
		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
26.1
26.0	all	141 (2,*)	10 (2,*)	80 (2,*)	141	143	11	15.5 (2,*)	28	14.9 (2,*)	13.52 (2,*)	3.0-3.1
18.5-18.6		4.4.3-4.4.4 (2,*)	7 (2,*)	12.1			10		27			2.5
18.4		4.4 (2,*)		12					26
18.3		4.2-4.3 (2,*)		11.5					25
Show all
18.2		4.1 (2,*)		11.1					24 (2,*)
18.1		4 (2,*)		11					23 (2,*)
18.0		3 (2,*)		10					22 (2,*)
17.6-17.7		2.3 (2,*)							21 (2,*)
17.5		2.2							20 (2,*)
17.4		2.1							19.0 (2,*)
17.3									18.0 (2,*)
17.2									17.0 (2,*)
17.1									16.0 (2,*)
17.0									15.0 (2,*)
16.6-16.7									14.0 (2,*)
16.5									13.0 (2,*)
16.4									12.0 (2,*)
16.3									11.1-11.2 (2,*)
16.2									10.1 (2,*)
16.1									9.2 (2,*)
16.0									8.2 (2,*)
15.6-15.8									7.2-7.4 (2,*)
15.5									6.2-6.4 (2,*)
15.4									5.0-5.4 (2,*)
15.2-15.3									4 (2,*)
15.0-15.1
14.5-14.8
14.0-14.4
13.4-13.7 (2,3,*)
13.3 (2,3,*)
13.2 (2,3,*)
13.0-13.1 (2,3,*)
12.2-12.5 (2,3,*)
12.0-12.1 (2,3,*)
11.3-11.4 (2,3,*)
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 separate properties (now dropped from the spec) instead of unified scrollbar-color property.

^* Partial support with prefix.

Bugs

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

Resources

• Firefox support bug
• Stackoverflow article discussing cross-browser support
• Tutorial for IE & WebKit/Blink browsers
• "perfect-scrollbar" - Minimal custom scrollbar plugin
• jQuery custom content scroller
• Webkit blog post describing their non-standard support