如何处理 jquery mobile 中 input=range 的样式？

发布于 2024-10-12 20:11:37 字数 431 浏览 4 评论 0原文

我想设置 html5 输入类型“范围”的样式。我正在尝试使用 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>

原文

I want to style the html5 input type 'range'.
I am trying to create a mobile website using jquerymobile, but having a bit trouble on styling it in the right way.

I want to have two labels, one at each end of the range selecter, and want the 'pen' to be a black thin stroke.

Right now I have something like this

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放我走吧 2024-10-19 20:11:37

我自己找到了解决方案。

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

I found the solution by myself.

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

And the 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>

回复收藏 0 原文

~没有更多了~