CSS scrollbar styling

Methods of styling scrollbars' color and width.

Spec	https://drafts.csswg.org/css-scrollbars-1/
Status	Unofficial / Note

IE	Edge	Firefox	Chrome	Safari	Opera
			98 (2,*)
		95 (6)	97 (2,*)
		94 (6)	96 (2,*)	TP (2,*)
11 (1)	95 (2,*)	93 (6)	95 (2,*)	15 (2,*)	80 (2,*)
10 (1)	94 (2,*)	92 (6)	94 (2,*)	14.1 (2,*)	79 (2,*)
9 (1)	93 (2,*)	91 (6)	93 (2,*)	14 (2,*)	78 (2,*)
8 (1)	92 (2,*)	90 (6)	92 (2,*)	13.1 (2,*)	77 (2,*)
Show all
7 (1)	91 (2,*)	89 (6)	91 (2,*)	13 (2,*)	76 (2,*)
6 (1)	90 (2,*)	88 (6)	90 (2,*)	12.1 (2,*)	75 (2,*)
5.5 (1)	89 (2,*)	87 (6)	89 (2,*)	12 (2,*)	74 (2,*)
	88 (2,*)	86 (6)	88 (2,*)	11.1 (2,*)	73 (2,*)
	87 (2,*)	85 (6)	87 (2,*)	11 (2,*)	72 (2,*)
	86 (2,*)	84 (6)	86 (2,*)	10.1 (2,*)	71 (2,*)
	85 (2,*)	83 (6)	85 (2,*)	10 (2,*)	70 (2,*)
	84 (2,*)	82 (6)	84 (2,*)	9.1 (2,*)	69 (2,*)
	83 (2,*)	81 (6)	83 (2,*)	9 (2,*)	68 (2,*)
	81 (2,*)	80 (6)	81 (2,*)	8 (2,*)	67 (2,*)
	80 (2,*)	79 (6)	80 (2,*)	7.1 (2,*)	66 (2,*)
	79 (2,*)	78 (6)	79 (2,*)	7 (2,*)	65 (2,*)
	18	77 (6)	78 (2,*)	6.1 (2,*)	64 (2,*)
	17	76 (6)	77 (2,*)	6 (2,*)	63 (2,*)
	16	75 (6)	76 (2,*)	5.1 (2,*)	62 (2,*)
	15	74 (6)	75 (2,*)	5	60 (2,*)
	14	73 (6)	74 (2,*)	4	58 (2,*)
	13	72 (6)	73 (2,*)	3.2	57 (2,*)
	12	71 (6)	72 (2,*)	3.1	56 (2,*)
		70 (6)	71 (2,*)		55 (2,*)
		69 (6)	70 (2,*)		54 (2,*)
		68 (6)	69 (2,*)		53 (2,*)
		67 (6)	68 (2,*)		52 (2,*)
		66 (6)	67 (2,*)		51 (2,*)
		65 (6)	66 (2,*)		50 (2,*)
		64 (6)	65 (2,*)		49 (2,*)
		63 (4,5)	64 (2,*)		48 (2,*)
		62	63 (2,*)		47 (2,*)
		61	62 (2,*)		46 (2,*)
		60	61 (2,*)		45 (2,*)
		59	60 (2,*)		44 (2,*)
		58	59 (2,*)		43 (2,*)
		57	58 (2,*)		42 (2,*)
		56	57 (2,*)		41 (2,*)
		55	56 (2,*)		40 (2,*)
		54	55 (2,*)		39 (2,*)
		53	54 (2,*)		38 (2,*)
		52	53 (2,*)		37 (2,*)
		51	52 (2,*)		36 (2,*)
		50	51 (2,*)		35 (2,*)
		49	50 (2,*)		34 (2,*)
		48	49 (2,*)		33 (2,*)
		47	48 (2,*)		32 (2,*)
		46	47 (2,*)		31 (2,*)
		45	46 (2,*)		30 (2,*)
		44	45 (2,*)		29 (2,*)
		43	44 (2,*)		28 (2,*)
		42	43 (2,*)		27 (2,*)
		41	42 (2,*)		26 (2,*)
		40	41 (2,*)		25 (2,*)
		39	40 (2,*)		24 (2,*)
		38	39 (2,*)		23 (2,*)
		37	38 (2,*)		22 (2,*)
		36	37 (2,*)		21 (2,*)
		35	36 (2,*)		20 (2,*)
		34	35 (2,*)		19 (2,*)
		33	34 (2,*)		18 (2,*)
		32	33 (2,*)		17 (2,*)
		31	32 (2,*)		16 (2,*)
		30	31 (2,*)		15 (2,*)
		29	30 (2,*)		12.1
		28	29 (2,*)		12
		27	28 (2,*)		11.6
		26	27 (2,*)		11.5
		25	26 (2,*)		11.1
		24	25 (2,*)		11
		23	24 (2,*)		10.6
		22	23 (2,*)		10.5
		21	22 (2,*)		10.0-10.1
		20	21 (2,*)		9.5-9.6
		19	20 (2,*)		9
		18	19 (2,*)
		17	18 (2,*)
		16	17 (2,*)
		15	16 (2,*)
		14	15 (2,*)
		13	14 (2,*)
		12	13 (2,*)
		11	12 (2,*)
		10	11 (2,*)
		9	10 (2,*)
		8	9 (2,*)
		7	8 (2,*)
		6	7 (2,*)
		5	6 (2,*)
		4	5 (2,*)
		3.6	4 (2,*)
		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
15 (2,3,*)	all	94 (2,*)	10 (2,*)	64 (2,*)	94 (2,*)	92	11	12.12 (2,*)	15.0 (2,*)	10.4 (2,*)	7.12 (2,*)	2.5
14.5-14.8 (2,3,*)		4.4.3-4.4.4 (2,*)	7 (2,*)	12.1			10		14.0 (2,*)
14.0-14.4 (2,3,*)		4.4 (2,*)		12					13.0 (2,*)
13.4-13.7 (2,3,*)		4.2-4.3 (2,*)		11.5					12.0 (2,*)
Show all
13.3 (2,3,*)		4.1 (2,*)		11.1					11.1-11.2 (2,*)
13.2 (2,3,*)		4 (2,*)		11					10.1 (2,*)
13.0-13.1 (2,3,*)		3 (2,*)		10					9.2 (2,*)
12.2-12.5 (2,3,*)		2.3 (2,*)							8.2 (2,*)
12.0-12.1 (2,3,*)		2.2							7.2-7.4 (2,*)
11.3-11.4 (2,3,*)		2.1							6.2-6.4 (2,*)
11.0-11.2 (2,3,*)									5.0-5.4 (2,*)
10.3 (2,3,*)									4 (2,*)
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

• Firefox support bug
• Stackoverflow article discussiong 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