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

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航