如何只定制css为html5输入范围slider-vertical？ [英] How to customize only with css for html5 input range slider-vertical?

问题描述

希望避免使用CSS 3指令，例如transform：rotate ，它使UI布局复杂化。

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

定制适用于水平默认滑块，但不适用于垂直滑块，您可以在这里查看：

jsFiddle： a href =http://jsfiddle.net/QU5VD/1/> http://jsfiddle.net/QU5VD/1/

否则，这里是代码：

HTML

; input type =rangeclass =vHorizo​​n/>

< input type = class =vVertical/>

CSS

$ b b

 输入[type =range]。vHorizo​​n {
 -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; 
} 
  

解决方案

**更新的答案**

如果我正确理解你，你试图让你垂直看起来像水平的样子？如果是这样：

  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] .vHorizo​​n {
 -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; 
} 
  

小提示 < - UPDATED

I would like to customize the look of a html5 input[range] when it's vertical.

Want to avoid CSS 3 directive like transform:rotate, it complicates the UI layout then.

Webkit css properties are recognised in my context, the others vendors are useless in my case.

The customisation works good for the horizontal default slider, but not for the vertical one, you can look at here :

jsFiddle : http://jsfiddle.net/QU5VD/1/

Otherwise, here's the code :

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;
}

解决方案

**UPDATED ANSWER**

If i understand you correctly, you are trying to make you vertical look like what your horizontal looks like? if so:

    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 <--UPDATED

这篇关于如何只定制css为html5输入范围slider-vertical？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！