查看: 536|回复: 0

[UI界面设计] css3美化浏览器原生rang组件

[复制链接]
发表于 2019-8-30 22:11:48 | 显示全部楼层 |阅读模式
  1. input[type="range"] {
  2.         /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
  3.         /*margin-top: 2px;*/
  4.         background-color: rgba(76, 175, 80, 0.86);
  5.         border-radius: 30px;
  6.         width: 4rem;
  7.         -webkit-appearance: none;
  8.         height:0.3rem;
  9.         border: none;
  10. }
  11. input[type="range"]::-webkit-slider-thumb {
  12.     -webkit-appearance: none;
  13.     cursor: default;
  14.     top: 0.2rem;
  15.     height: 0.5rem;
  16.     width: 0.5rem;
  17.     transform: translateY(0rem);
  18.     background: none repeat scroll 0 0 #4CAF50;
  19.     border-radius: 100%;
  20.     border: none;
  21.     /*-webkit-box-shadow: 0 -1px 1px black inset;*/
  22. }
复制代码
  1. <input class="rangeInput" type="range" min="1" max="10" step="1" value="1" />
复制代码
20170615173038_39736.png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表