How to use a custom image for cursor/thumb in html input type range


Tags: html,css

Problem :

My element is a range-type slider bar

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

For the cursor/thumb I do not want to use default image. I have to use my own .png image in my project folder.

Here's the current css for my thumb

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 */  
}

How can I provide my own custom image for the thumb ?



Solution :

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

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


    CSS Howto..

    How to center navigation that has icons so text is aligned to icons?

    How do I remove the side padding in the following case?

    Navbar on left of page, how to let content resize to match screen size?

    How to auto resize the parent node according to its children

    How to apply SVG so that it works in IE background image

    How to put a ribbon image on another image with css?

    How to make text wrap above and below a div?

    How to style parent li elements of headers using CSS?

    CSS hover - parents are affected, too. How to avoid this?

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    How to center div and ul using CSS?

    How to use JS to target specific domain html links with CSS classes?

    how to activate the functions of a div in css after focusing in a textbox in asp.net?

    CSS: How to align text to the center of the image (left side)

    CSS: How to fake a :hover state?

    How to not send images to mobiles in a semantic manner

    How to keep CSS from render-blocking my website?

    CSS - How to Style a Selected Radio Buttons Label?

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How can I get rid of one animation in a media query?

    How to create a static footer in CSS?

    How to fit two divs side by side horizontally?

    How to hide text without ID?

    how to align right hand side image on top of text on mobile screen

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    CSS: how to have reposition relative to a centered background image

    how to overwrite css style

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    How to create cube with only HTML and CSS?

    How to use css property under a class only