时间戳

首页 > 解决方案 > 获取 CSS 中自定义滑块的活动状态

html - 获取 CSS 中自定义滑块的活动状态

问题描述

有没有办法:active在单击时获取滑块（拇指）的状态？

我试图在单击并拖动时将其设置cursor: grab为。cursor: grabbing我已经尝试过:active（:focus元素本身），.slider但这些组合都不起作用。<input>.slider::-webkit-slider-thumbinput[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;
}

标签： htmlcssslider

解决方案

推荐阅读