有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。
在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”