Question

我刚刚发现，如何更改滑块拇指的光晕：

.ui-page-theme-a .ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}

现在我不知道如何选择我的id并为每个滑块切换发光。我认为它可以像这样工作：

#slider1.ui-page-theme-a #slider1.ui-btn:focus {
box-shadow: 0 0 12px #FF0;
}

但遗憾的是，这不起作用。我希望你理解我的问题，你可以帮助我:)。

HTML：

<body>
<div data-role="page">
    <div data-role="content">
        <ul data-role="listview">
            <li>
                <input type="range" value="0" min="0" max="100" id="slider1" step="5" />
            </li>
        </ul>
    </div>
</div>

Answer 1

将其应用于所有滑块：

.ui-slider .ui-btn:focus {
    box-shadow: 0 0 12px #FF0;
}

<强> DEMO

评论更新： OP希望页面上的各个滑块具有不同的发光颜色

jQM通过在输入旁边添加div来增强滑块。因此，使用输入id的任何CSS或类都不适用于滑块标记。在您的情况下，您在列表中的<LI>内有每个滑块。因此，一种解决方法是将颜色类应用于listitem，然后为listitem中包含的任何滑块创建规则：

<ul data-role="listview">
    <li class="glowBlue">
        <input type="range" value="0" min="0" max="100" id="slider1" step="5" />
    </li>
    <li class="glowYellow">
        <input type="range" value="0" min="0" max="100" id="slider2" step="5" />
    </li>
    <li class="glowRed">
        <input type="range" value="0" min="0" max="100" id="slider3" step="5" />
    </li>
    <li class="glowGreen">
        <input type="range" value="0" min="0" max="100" id="slider4" step="5" />
    </li>
</ul>

然后CSS将是

.glowBlue .ui-slider .ui-btn:focus {
    box-shadow: 0 0 12px #0080f0;
}
.glowYellow .ui-slider .ui-btn:focus {
    box-shadow: 0 0 12px #FF0;
}
.glowRed .ui-slider .ui-btn:focus {
    box-shadow: 0 0 12px #FF0000;
}
.glowGreen .ui-slider .ui-btn:focus {
    box-shadow: 0 0 12px #00FF00;
}

更新了 DEMO

另一种方法是使用jQuery查找最近的类与.ui-slider的DIV并添加glowClass。在这种情况下，您可以在输入中添加辉光类名称作为数据属性：

        <ul data-role="listview">
            <li >
                <input type="range" value="0" min="0" max="100" id="slider1" step="5" data-glowclass="glowBlue" />
            </li>
            <li >
                <input type="range" value="0" min="0" max="100" id="slider2" step="5" data-glowclass="glowYellow"/>
            </li>
            <li >
                <input type="range" value="0" min="0" max="100" id="slider3" step="5" data-glowclass="glowRed"/>
            </li>
            <li >
                <input type="range" value="0" min="0" max="100" id="slider4" step="5" data-glowclass="glowGreen"/>
            </li>
        </ul>

更新课程：

.glowBlue .ui-btn:focus {
    box-shadow: 0 0 12px #0080f0;
}
.glowYellow .ui-btn:focus {
    box-shadow: 0 0 12px #FF0;
}
.glowRed .ui-btn:focus {
    box-shadow: 0 0 12px #FF0000;
}
.glowGreen .ui-btn:focus {
    box-shadow: 0 0 12px #00FF00;
}

运行以下javascript：

$(document).on("pagecreate", "#page1", function () {
    $(".ui-slider-input").each(function(index){
        var className = $(this).data("glowclass");
        $(this).closest(".ui-slider").addClass(className);
    });
});

<强> DEMO

如何更改jquerymobile滑块的光晕

1 个答案: