chrome滾動條樣式修改怎么操作 chrome瀏覽器滾動條樣式定制設置方法

2022-03-23 14:22

chrome瀏覽器是由谷歌開發(fā)的一款簡單便捷的網頁瀏覽工具,我們在電腦中使用chrome瀏覽器瀏覽網頁的時候,頁面右邊就會有一個可選擇的滾動條,對此有些用戶覺得滾動條樣式很是單一,因此就想要進行修改,那么chrome滾動條樣式修改怎么操作呢?下面小編就來教大家chrome瀏覽器滾動條樣式定制設置方法。

#5468復制
#

具體方法:

1、用記事本打開custom.css文件,復制下面的代碼

/*---滾動條默認顯示樣式--*/ 

::-webkit-scrollbar-thumb{ 

background-color:#018EE8; 

height:50px; 

outline-offset:-2px; 

outline:2px solid #fff; 

-webkit-border-radius:4px; 

border: 2px solid #fff; 

}

/*---鼠標點擊滾動條顯示樣式--*/ 

::-webkit-scrollbar-thumb:hover{ 

background-color:#FB4446; 

height:50px; 

-webkit-border-radius:4px; 

}

/*---滾動條大小--*/ 

::-webkit-scrollbar{ 

width:8px; 

height:8px; 

}

/*---滾動框背景樣式--*/ 

::-webkit-scrollbar-track-piece{ 

background-color:#fff; 

-webkit-border-radius:0; 

}

2、把以上代碼粘貼到custom.css文件里面,保存后重啟谷歌瀏覽器,滾動條就會變成這樣,當然,你也可以自己修改,顏色大小圓角那些。

 

chrome滾動條樣式修改怎么操作_chrome瀏覽器滾動條樣式定制設置方法

 

3、CSS里面hover是設置鼠標放上鏈接的顏色,同樣的,active也可以設置鼠標點擊的顏色,只要到上面的代碼添加如下代碼就行了。

::-webkit-scrollbar-thumb:active{

height:50px;

background-color:#000;

-webkit-border-radius:4px;

上述就是chrome瀏覽器滾動條樣式定制設置方法了,還有不清楚的用戶就可以參考一下小編的步驟進行操作,希望能夠對大家有所幫助。

網友評論

相關閱讀