如何解决在 CSS 中获取自定义滑块的活动状态
有没有办法在点击滑块(拇指)时获得 :active
状态?
单击并拖动时,我试图将 cursor: grab
设置为 cursor: grabbing
。我已经在 :active
(:focus
元素本身)、.slider
和 <input>
上尝试了 .slider::-webkit-slider-thumb
和 input[type='range']
,但这些组合都不起作用。
有什么想法吗?谢谢。
HTML
<input type="range" class="slider"></input>
CSS
.slider {
-webkit-appearance: none;
appearance: none;
width: 480px;
height: 30px;
background: #fff;
border-radius: 3px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 30px;
border-radius: 3px;
background: #666;
cursor: grab;
}
.slider::-moz-range-thumb,.slider::-ms-thumb {
width: 20px;
height: 30px;
border-radius: 3px;
background: #666;
cursor: grab;
}
/* The following code is not working */
.slider:focus {
cursor: grabbing;
}
.slider::-webkit-slider-thumb:active,.slider::-moz-range-thumb:active {
cursor: grabbing;
}
input[type='range']:focus {
cursor: grabbing;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。