风格::-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屋!