如何僅使用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輸入範圍滑塊垂直自定義？

回答

相關問題