I want to change the width and height of jquery slider UI. I am using ui-lightness
theme. I tried to override the default jquery.css by adding the following code in my style sheet.
.ui-slider .ui-slider-horizontal { height: .6em; }
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1em;
height: 1em;
cursor: default;
}
But the above css has no effect. jquery.css overrides the above style and I see no change in the slider. How to override the default jquery.css styles?
Try adding the !important
rule over after your width
and height
declaration, like so:
width:1em !important;
height:1em !important;
That should force your declaration to be read.