首页 > 网站 > WEB开发 > 正文

CSS修改input[type=range]滑块样式

2024-04-27 14:26:50
字体:
来源:转载
供稿:网友
CSS修改input[type=range]滑块样式

input[type="range"]是html5中的input标签新属性,样子如下:

<inputtype="range"value="40"/>

如果想让此滑块效果如下图所示,怎么做呢?

以下是样式部分:

<styletype="text/css">input[type="range"]{-webkit-box-shadow:01px00px#424242,01px0#060607inset,0px2px10px0pxblackinset,1px0px2pxrgba(0,0,0,0.4)inset,00px1pxrgba(0,0,0,0.6)inset;margin-top:2px;background-color:#272728;border-radius:15px;width:400px;-webkit-appearance:none;height:10px;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;cursor:default;top:-5px;height:30px;width:20px;transform:translateY(-4px);background:nonerepeatscroll00#777;border-radius:15px;-webkit-box-shadow:0-1px1pxblackinset;}</style>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表