css 自定義滾動條樣式

2021-10-04 17:16:57 字數 843 閱讀 3961

總是記不住這幾個修改滾動條的偽類,抄過來記錄一下:

你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式:

::-webkit-scrollbar  整個滾動條.

::-webkit-scrollbar-button 滾動條上的按鈕 (上下箭頭).

::-webkit-scrollbar-thumb 滾動條上的滾動滑塊.

::-webkit-scrollbar-track 滾動條軌道.

::-webkit-scrollbar-track-piece 滾動條沒有滑塊的軌道部分.

::-webkit-scrollbar-corner 當同時有垂直滾動條和水平滾動條時交匯的部分.

::-webkit-resizer 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

使用時注意瀏覽器哈,至於ie的話:

scrollbar-arrow-color  三角箭頭的顏色

scrollbar-3dlight-color 設定箭頭和滾動條的左邊和上邊的顏色

scrollbar-shadow-color 滾動條滑塊陰影

scrollbar-darkshadow-color 動條滑塊強陰影的顏色

scrollbar-highlight-color 滾動條軌道顏色

scrollbar-track-color 滾動條軌道顏色,優先順序更高

scrollbar-base-color 滾動條基礎顏色(軌道和滑塊)

scrollbar-face-color 滾動條滑塊顏色 優先順序更高

CSS自定義滾動條樣式

ie是最早提供滾動條的樣式支援,好多年了,但是其它瀏覽器一直沒有支援,ie獨孤求敗了。這些樣式規則很簡單 scrollbar arrow color color 三角箭頭的顏色 scrollbar face color color 立體滾動條的顏色 包括箭頭部分的背景色 scrollbar 3dli...

CSS 自定義滾動條樣式

css 自定義滾動條樣式 針對 webkit 核心的遊覽器,使用下列偽類改變滾動條預設樣式。webkit scrollbar 滾動條整體部分 webkit scrollbar thumb 滾動條內滑塊 上下或左後移動 webkit scrollbar track 滾動條軌道 webkit scrol...

css 自定義滾動條樣式

說明 webkit scrollbar 滾動條整體部分,可以設定寬度啥的 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar track piece 內層滾動槽 webkit scrollbar ...