在jquery中隐藏滑块输入框

Question

我正在使用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" />

它的渲染如下:

但我想删除红色标记的部分.我想只显示滑块部分.

如何才能做到这一点？

Answer 1

如果您只想摆脱向上/向下箭头,可以将输入包装在具有指定宽度/高度的元素中,并且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隐藏输入元素(这很好,因为你不必像使用JS一样执行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;
}

Answer 2

input.ui-slider-input {
  display: none;
}