No cursor on disabled input type=range

Giganews Newsgroups
Subject: No cursor on disabled input type=range
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Mon, 9 Mar 2020

I have an input of type range and this CSS (there are other declaration
for Firefox etc):

input[type="range"] {
  -webkit-appearance: none;
  width:100%;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background: #dddddd;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  border: 1px solid #000000;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: #bd9b8f;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
}
input[type="range"]:focus {
  outline: none;
}

This displays as expected but when the input is disabled the cursor on
the thumb remains as a pointer. I need the cursor to change to default.
I tried adding

input[type="range"]:disabled {
  cursor: default;
}

but that made no difference. What CSS changes the cursor on a disabled
range thumb to default?

Andrew Poulos

Replies