css - Ändra bakgrundsfärg på anpassad input range-pekare när input är inaktiverad

Jag har en anpassad insats-pekare på min intervallreglage och jag vill att den ska ändra färg när den ändras till inaktiverad

Jag försökte lägga till en klass på tummen så här

input[type=range]::-webkit-slider-thumb.disabled

och försökte också lägga till disabled-direktivet

input[type=range]::-webkit-slider-thumb:disabled

och inget av detta fungerar.

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #ffffff;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: linear-gradient(#FF6C2C,#FF2626);
  margin-top: -9px;
  z-index: 4;
}

Jag skulle vilja att det liknade detta:

input[type=range]::-webkit-slider-thumb:disabled {
  background: #CCCCCC;
}

Finns det något alternativ för att det kan göras? Jag får inte använda jQuery.

Svar #1

Strunt i det, jag har äntligen hittat en lösning, det ska se ut så här:

input[type=range].disabled::-webkit-slider-thumb{
  background: #CCCCCC;
}

Klassen "disabled" bör komma efter input[type=range] och då kommer det att fungera

Svar #2

#myrange{
  -webkit-appearance: none;
  outline:none;
  border: 2px solid #ffffff;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0,1);
 overflow:hidden;
}

#myrange::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 15px;
      width: 15px;
      border-radius:50%; 
      background:#000000;
      box-shadow: -410px 0 0 400px #007bff;
      cursor:pointer;
}
 <input style="" type= "range" id="myrange" name="point_count" min= "0"   max = "100" value= "10" disabled >

Relaterade artiklar