如何在html输入类型范围内使用自定义图像的光标/拇指

时间:2015-06-23 11:20:23

标签: html css

我的元素是范围类型的滑块

<input id="bar" type="range" min="0" max="72" value="0" onchange="updateValue(this.value);" />

对于光标/拇指,我不想使用默认图像。 我必须在我的项目文件夹中使用我自己的.png图像。

这是我拇指的当前css

input[type=range]::-moz-range-thumb {
  /*height: 38px;
  width: 1px;*/
  background: transparent;
  width: 0;
  height: 0;
  cursor: default;
  border: initial;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #474747;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */  
}

如何为拇指提供我自己的自定义图像?

1 个答案:

答案 0 :(得分:4)

.test {
    cursor:url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), auto;
}

http://jsfiddle.net/wNKcU/5/