我正在使用
jquery Mobile 1.0.
我有这个HTML代码.
<label for="slider" class="ui-hidden-accessible">
Input slider:
</label>
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />
它的渲染像这样：
但是我想删除红色标记的部分.我只想显示滑块部分.
如何才能做到这一点？
解决方法
如果只想摆脱上/下箭头,可以将输入包含在指定宽度/高度的元素中,并且overflow：hidden：
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',display : 'inline-block',height : '36px',width : '45px',overflow : 'hidden'
}));
或者如Frederic Hamidi所说,您可以将元素全部隐藏在一起,只有一个滑块才可见.
以下是上述代码演示：http://jsfiddle.net/EWQ6n/1/
另外你可以用CSS隐藏input元素(这是很好的,因为你不用像JS那样像CSS那样执行CSS)：
.ui-slider-input {
display : none !important;
}
这是一个使用CSS：http://jsfiddle.net/EWQ6n/2/的演示
更新
而不是使用！important关键字,您还可以制定一个更具体的CSS规则,以便它在jQuery Mobile类中使用.一个例子是：
.ui-mobile .ui-page .ui-slider-input,.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}