Css cursor ns-resize does not appear on element input type="range"

NOTE: Any “one-liner” or topics requesting support or reporting bugs that do not make an effort to include as much of this information as possible will not be responded to. Repeatedly posting as such is grounds for banning._
Please try to adhere to this template when reporting bugs. If you think you don’t need to fill out every section in the template fill out as much of it as you can and please be as descriptive as possible when posting.
<---------Delete this line and everything above before posting---------->

Description of the issue:
I have specified a “cursor: ns-resize;” in my css stylesheet. It’s a vertical line with arrows at each end. This is intended to display when hovered over an [ input type=“range” ] element. The cursor changes as intended using Chrome and Safari (MacOS), but not with Brave. This appears to be a [ type=“range” ] issue more than a cursor type issue as I cannot get e-resize to display over [ input type=“range” ] either, even though that cursor displays as intended in another part of my code.

Steps to Reproduce (add as many as necessary): 1. 2. 3.
I have tried restarts, logging in as different user in the web app I am creating, reloading the stylesheet, using the same code for other parts of my site, using a known-to-be-working cursor change from another part of my code in the troublesome (see above) section, etc. The only user action needed is to hover the cursor over the element.

Here is the css: (note: this is being applied to [ input type=“range” ]
.slider400 {
visibility: hidden;
width: 181px;
height: 2px;
border-radius: 2px;
color: yellow;
background-color: black;
outline: none;
opacity: 0;
padding: 0px;
margin: 0px;
position: absolute;
left: 114px;
top: 160px;
cursor: ns-resize;
transform: rotate(90deg);
}
.slider400:hover {
opacity: 1; /* Fully shown on mouse-over */
cursor: ns-resize;
color: green;
}
.slider400::thumb {
width: 4px;
height: 4px;
border-radius: 2px;
border: 1px solid red;
color: red;
background-color: white;
cursor: ns-resize;
}

Note that even with “cursor: pointer;” under “.slider400::thumb {” the cursor displays correctly (vertical short line with arrow at each end) in Safari and Chrome.

Actual Result (gifs and screenshots are welcome!):
Cursor displays as pointer in Brave (unfortunately screenshots do not include the cursor!)
Cursor displays as short vertical line with arrows at each end in Safari and Chrome.

Expected result:
cursor should display as short vertical line with arrows at each end in every browser, including Brave, when hovered over the range input type.
image

Reproduces how often:
Fails 100% in Brave, works 100% in Safari and Chrome.

Operating System and Brave Version(See the About Brave page in the main menu):
MacOS 1.15.7

Version 1.37.111 Chromium: 100.0.4896.79 (Official Build) (x86_64)

Additional Information:
Note that the range element is rotated using “transform: rotate(90deg);” in my css code. Oddly, commenting that line out does not remove the transform effect in Brave thru multiple reloads and restarts. In Chrome, commenting out the transform results in changed display after one reload. I just started trying the cursor change yesterday. The range slider has otherwise worked very well for a year now.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.