lucifer63 lucifer63 - 5 months ago 27
HTML Question

Range input seems to ignore z-index

I'm trying to create a range input that is a little bit fancy )
I found it difficult to style it so i decided that the best way to do this is to create separate layers for 1) stylized

and 2) transparent
<input type="range">

Here is the example:
enter image description here

z-index: 2;
<input type="range">
z-index: 5; opacity: 0;

But anyway, when i try to drag the thumb of the range, i actually just select text in the fake thumb )

Here is the live example

How to solve this?

UPDATE: here is the example in which the problem is solved.


z-index only applies to positioned elements, so it must be absolute, relative, or fixed. Just set the <input>'s position to position:relative;:

input {
  height: 40px;
  opacity: 0;
  z-index: 5;

JSFiddle Demo