当前位置:编程学习 > html/css >>

chrome滚动条

 有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。
  在Chrome中,应该是这样,在style中加入一些代码即可,你也可以修改Chrome的custom.css文件,从而使所有页面的滚动条都有修改。
Html代码 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Chrome scroll</title> 
     <style type="text/css" media="screen"> 
        ::-webkit-scrollbar-track-piece{ 
            background-color:#fff; 
            -webkit-border-radius:3; 
        } 
        ::-webkit-scrollbar{ 
            width:15px; 
            height:8px; 
        } 
        ::-webkit-scrollbar-thumb{ 
            height:30px; 
            background-color:#999; 
            -webkit-border-radius:7px; 
            outline:2px solid #fff; 
            outline-offset:-2px; 
            border: 2px solid #fff; 
        } 
        ::-webkit-scrollbar-thumb:hover{ 
            height:30px; 
            background-color:#9f9f9f; 
            -webkit-border-radius:8px; 
        } 
        ul {margin:0px; padding:0px; width:100px; height:200px; overflow-x:hidden; overflow-y:auto;} 
     </style> 
</head> 
<body> 
    <ul> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
        <li>ffffffffffffff</li> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
</body> 
</html> 

作者“python”

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,