1

I am using this svg as background of input type="range" thump via background-image

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.33691" y="3.37695" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="3.33691" y="16.8809" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="16.6826" y="3.37695" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="16.6826" y="16.8809" width="3.33612" height="3.37622" fill="#695B51"/>
<rect width="10.0084" height="23.6334" transform="matrix(-1 0 0 1 16.6826 0)" fill="#695B51"/>
<rect width="10.0084" height="16.881" transform="matrix(-1 0 0 1 16.6826 3.37695)" fill="#F0BA15"/>
<rect y="6.75195" width="23.3528" height="10.1287" fill="#695B51"/>
<rect x="3.33691" y="6.75195" width="16.6806" height="10.1287" fill="#F0BA15"/>
</svg>

here is my css

.sliderBar::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-image: url('../../public/sliderthump.svg');
    cursor: pointer;
    background-size: cover;
    border: none;
    z-index: 9999;
  }

Every thing seems to be fine until i see that in mobile version it auto add white background to my image,

this is desktop version enter image description here

and this is mobile version enter image description here

How can i remove the white background in this case or do we have any alternative?

sonphung.xf
  • 107
  • 8

1 Answers1

1

You can replace background-image: url(...) to background: url(...) then white background will remove.

body{
    background-color: #f9bcbc;
    padding: 20px;
}
.sliderBar {
    -webkit-appearance: none;
    appearance: none;
    width: 75%;
    height: 10px;
    border-radius: 10px;
    background: #fbe87b;
    outline: none;
}
.sliderBar[type=range]::-webkit-slider-thumb{
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='3.33691' y='3.37695' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='3.33691' y='16.8809' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='16.6826' y='3.37695' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='16.6826' y='16.8809' width='3.33612' height='3.37622' fill='%23695B51'/><rect width='10.0084' height='23.6334' transform='matrix(-1 0 0 1 16.6826 0)' fill='%23695B51'/><rect width='10.0084' height='16.881' transform='matrix(-1 0 0 1 16.6826 3.37695)' fill='%23F0BA15'/><rect y='6.75195' width='23.3528' height='10.1287' fill='%23695B51'/><rect x='3.33691' y='6.75195' width='16.6806' height='10.1287' fill='%23F0BA15'/></svg>");
    cursor: pointer;
    background-size: cover;
    border: none;
    z-index: 9999;
}
<input type="range" class="sliderBar" value="10">
Raeesh Alam
  • 3,380
  • 1
  • 10
  • 9