創建垂直滑塊HTML元素

我試圖創建一個看起來像這樣我自己的HTML元素：創建垂直滑塊HTML元素

的樣子，我想創建： I am trying to create this look 我嘗試： My attempt at replication

窗口小部件只是一個iPad版本的網站&我不能遺憾地使用JQuery。

我的問題：我想添加滑塊/箭頭到小部件，但我不知道如何？有沒有一個webkit外觀上有一個箭頭滑塊？小部件上是否可以有滑塊箭頭？

我的代碼：

<div style="background-color: rgb(191, 326, 383); width: 200px;"> 
    <ul style="list-style: none; -webkit-appearance: slider-vertical; width: 200px; height: 300px; margin: 0;"> 
     <li>jddsjh -</li> 
     <li>jddsjh -</li> 
     <li>jddsjh -</li> 
     <li>jddsjh -</li> 
    </ul> 
</div>

來源

2012-01-02 Jake M

爲什麼你不能使用jQuery？你將不得不爲句柄創建一個資產或者使用CSS來渲染一個資產，但據我所知，它沒有webkit外觀。爲了實現它的功能，你必須重新編寫jQuery UI的draggable（）。不是非常困難，但不是我會熱心的事情。 – 2012-01-02 01:30:10

你是否在尋找類似這樣的東西：http://jsfiddle.net/XyJWa/ – henryaaron 2012-01-02 02:11:32

@ user1090389多數民衆贊成在完美，你應該作出答案，所以我可以接受。不知道如何，甚至可以工作，但它的需要：P – 2012-01-02 02:17:43

input[type="range"] { 
 
    position:absolute; 
 
    -webkit-transform: rotate(90deg); 
 
    top:100px; 
 
    
 
}

<input type="range">

來源

2012-01-02 02:31:13 henryaaron

只是補充你的答案，你也可以設置控件的樣式：http://jsfiddle.net/Wv6cU/ – Duopixel 2012-01-02 09:23:21

創建垂直滑塊HTML元素

回答

相關問題