CODEWITHSUNDEEP
cssgoogle-chromeinternet-explorer
user4672900
user4672900

Reputation:

::-ms-thumb appears behind track

I have created a custom class for some sliders.In chrome everything is working fine.See image below:

Chrome

enter image description here

My problem though is that on internet explorer i get this: enter image description here

Now here is my css:

input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);

}



    input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);

}

Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?

Upvotes: 2

Views: 1262

Answers (1)

user4749485
user4749485

Reputation: 1028



The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.

here's an online demo

Upvotes: 1

Related Questions