css滑块样式,html定义滑块控件类型

css怎样设置滚动条的颜色及样式

改变浏览器默认的滚动条样式：

//滚动条凹槽的颜色，还可以设置边框属性

::-webkit-scrollbar-track-piece {

background-color:#f8f8f8; 

}

//滚动条的宽度

::-webkit-scrollbar {

width:9px;

height:9px;

}

//滚动条的设置

::-webkit-scrollbar-thumb {

background-color:#dddddd;

background-clip:padding-box;

min-height:28px;

}

::-webkit-scrollbar-thumb:hover {

background-color:#bbb;

}

扩展资料：

给某个div，class为test1加滚动条样式：

.test1::-webkit-scrollbar {

width: 8px;

}

.test1::-webkit-scrollbar-track {

background-color:red;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

.test1::-webkit-scrollbar-thumb {

background-color:green;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

相关问答

Q1: 在css中怎样改变滚动条的样式

/*IE滚动条颜色设置*/

body {

scrollbar-arrow-color:#f2f2f3; /*上下箭头*/

scrollbar-track-color:#1589ce; /*底层背景色*/

scrollbar-face-color:#27aeff; /*滚动条前景色*/

scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/

}

/*chrome滚动条颜色设置*/

body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

body::-webkit-scrollbar-track {background-color:#ccc; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);} /*定义滚动条轨道 内阴影+圆角*/

body::-webkit-scrollbar-thumb {background-color:#555; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);} /*定义滑块 内阴影+圆角*/

Q2: 用CSS样式，怎么去掉滚动条中间的滑块？

现在就是滚动条的样式问题，想要只有箭头，没有滑块的 .divnr{width:108px; padding:0px; height:335px; text-align:center; overflow-y:auto; scrollbar-face-color:#F6F6F6; scrollbar-track-color:#F6F6F6; scrollbar-arrow-color:#66B9FA; scrollbar-3dlight-color:#FFFFFF; scrollbar-darkshadow-color:#F6F6F6; scrollbar-highlight-color:#66B9FA; scrollbar-shadow-color:#66B9FA; ScrollBars:=ssBoth;}回答： 这个以前弄过~没成功过~好像只能换掉颜色吧~你把颜色都改成同意的~箭头独立出来应该就可以出现你要的那个效果了 追问： 我还想要箭头那里的框框

Q3: css设置div滚动条样式

目前只有chrome支持设置滚动条样式，给div设置伪类

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track  外层轨道

::-webkit-scrollbar-track-piece  内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

如div::-webkit-scrollbar{

width:4px

}