风格::-webkit-slider-thumb with jquery [英] style ::-webkit-slider-thumb with jquery

问题描述

我有一些要通过jquery设置样式的滑块 例如:

I have some sliders which I want to style via jquery For example:

<input type="range"/>

要使用普通的CSS设置样式，我会写:

To style it with plain css I would write:

input[type="range"]::-webkit-slider-thumb{
/* blah blah blah*/
background:red;
}

这正在工作. 但是，如果我尝试这样做:

This is working. However if I try this:

$("input[type='range']::-webkit-slider-thumb").css("background","red");

它不会给我一个错误，但也将不起作用. 我看过其他一些类似的问题.这些问题的答案是用jquery和一些类插入一个新的样式标签(我不想做的事情).有什么方法可以对::-webkit-slider-thumb进行样式设置与jQuery的? 更新 我不想将任何新样式的标签注入html或使用自定义类！

It will not give me an error but it also will not work. I have seen some other similar questions .The answer to these questions were to insert a new style tag with jquery and some classes(Something i don't want to do).Is there any way to style ::-webkit-slider-thumb with jquery? UPDATE I don't want to inject any new style tags to my html or use custom classes!!!

推荐答案

CSS

.redslider::-webkit-slider-thumb {
    background-color: red;
}

jQuery

$('input[type=range]').addClass('redslider');

为什么?

::-webkit-slider-thumb实际上不是选择器.就像通过样式属性设置:active一样，这是不可能的.这样就可以了，所以我们必须在一个类中添加它.您可以使用document.styleSheets，但是对于诸如此类的简单任务，模棱两可，复杂且过分杀伤

Why?

::-webkit-slider-thumb isn't actually a selector. It's like setting an :active through a style attribute which isn't possible. That makes it so we have to make it in a class and add it. You could use document.styleSheets but that is ambiguous, complicated, and is overkill for a simple task such as this

这篇关于风格::-webkit-slider-thumb with jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！