我想设置html5输入类型'range'的样式。 我正在尝试使用jquerymobile创建一个移动网站,但在以正确的方式设置样式方面有点麻烦。
我希望有两个标签,一个位于范围选择器的每一端,并希望“笔”为黑色细笔画。
现在我有类似的东西
<label for="slider">None</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<label for="slider" style="text-align: right;">Many</label>
答案 0 :(得分:4)
我自己找到了解决方案。
<style type="text/css" media="screen">
/* Hide text-field*/
#slider {
display: none;
}
div.ui-slider {
width: 90%;
}
label.ui-block-right{
text-align: right;
float: right;
}
.min-width-480px div.ui-slider {
width: 90%;
}
.min-width-480px label.ui-slider {
width: 50%;
}
/* Slider is displayed as a thin stroke */
.ui-slider .ui-slider-handle {
width:2px;
height:30px;
background:url(images/slider-picker.gif) repeat-y; overflow: hidden;
position:absolute;
border-style:none;
margin-left: 0px;
margin-top: -15px;
}
</style>
和HTML
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<div class="ui-grid-a" >
<div class="ui-block-a"><label for="slider">None</label></div>
<div class="ui-block-b"><label class="ui-block-right" for="slider">Many</label></div>
</div>
</div>