有没有一种方式来设置HTML5的范围控制？

答

原来，有在WebKit的：

input[type="range"]{ 
    -webkit-appearance:none !important; 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
}

然后，您可以添加你需要在每个那些选择任何属性。背景，渐变等...

希望帮助！

+1

它只是隐藏的范围内控制。如何设计风格？我的意思是我们需要设置哪些属性？ – coure2011 2010-09-27 09:09:59

+0

只需添加如下内容：height：20px;背景颜色：红色; – 2010-12-09 21:02:07

+0

是的，这是可能的。检查此链接http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/ – Teknotica 2012-07-30 08:41:13

答

CSS定制的完整的例子（在这一刻的webkit）：

input[type="range"]{ 
    background: rgb(94, 30, 30); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]:hover{ 
    background: rgb(194, 139, 131); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border:1px solid black; 

    background: #a90329; 
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); 
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=1); 
} 

input[type="range"]::-webkit-slider-thumb:hover{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    background-color:rgb(56, 13, 13); 
    border:1px solid black; 

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); 
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1); 
}

+0

什么是-wekkit *？你在一些地方有这个问题，我不确定它是有意的还是偶然的。 – funkymushroom 2014-12-11 21:56:49

+0

它的基于WebKit引擎（CSS供应商）的浏览器的前缀http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm – shakaran 2014-12-11 22:37:40

+0

我问的是“-wekkit”（注意双k）在上面的一些行中，而不是标准的“-webkit”。我认为它可能是一个错字。：） – funkymushroom 2014-12-12 17:14:37

答

在顶端回答其已经描述。我只是在我的路上定制它。看看它可能会帮助你。

添加下面的代码在CSS：

input:focus{ 
    outline-color: transparent; 
} 
input[type="range"]{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    height: 6px; 
    background-color: #b6b6b6; 
    outline-color: transparent; 
} 
input::-webkit-slider-thumb{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:16px; 
    height:16px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -ms-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius:10px; 
    background-color: #20b373; 
    overflow: visible; 
}

Live Demo

有没有一种方式来设置HTML5的范围控制？

相关推荐