如何仅使用css for html5输入范围滑块垂直自定义？

我想在垂直时自定义html5输入[范围]的外观。如何仅使用css for html5输入范围滑块垂直自定义？

想要避免像CSS3指令转换：旋转，它使UI布局变得复杂。

Webkit css属性在我的上下文中被识别，其他供应商在我的情况下是无用的。

定制做工不错的水平默认滑块，而不是垂直的，你可以看看这里：

的jsfiddle：http://jsfiddle.net/QU5VD/1/

否则，下面的代码：

HTML

<input type="range" class="vHorizon" />

<input type="range" class="vVertical" />

CSS

input[type="range"].vHorizon { 
    -webkit-appearance: none; 
    background-color: pink; 
    width: 200px; 
    height:10px; 
} 
input[type="range"].vVertical { 
    -webkit-appearance: slider-vertical; 
    background-color: pink; 
    width: 10px; 
    height:200px; 
} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: red; 
    width: 20px; 
    height: 20px; 
}

来源

2013-05-28 medCoder

，我知道是用'改造一招：旋转（90）'的水平之一。但它是一个肮脏的伎俩，我不会建议使用它。但它仍然很好地了解它。 – Sourabh

由于几个原因，这是不是一个很好的技巧（必须照顾的位置，它使CPU工作（嵌入式软件）） – medCoder

嗨，我面临同样的问题，我想知道如果有人找到了更好的解决方案。使用旋转带来的滑块定位完全失控:( –

******修订ANSWER ****

如果我理解正确的话，你想使你纵是什么样子的水平好像？如果是这样：

input[type=range].vVertical { 
    -webkit-appearance: none; 
    background-color: green; 
    width: 200px; 
    height:10px; 

     -webkit-transform:rotate(90deg);  
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    z-index: 0; 
} 
input[type=range].vHorizon { 
    -webkit-appearance: none; 
    background-color: pink; 
    height: 10px; 
    width:200px; 

} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: red; 
    width: 20px; 
    height: 20px; 
}

fiddle < - 修订

来源

2013-05-28 16:22:08 cube

你的伎俩的作品，但正如我所说，我应该问在我的问题，我想避免css变换解决方法，它带来了位置和其他问题 – medCoder

如何仅使用css for html5输入范围滑块垂直自定义？

回答

相关问题