lucifer63 lucifer63 - 1 month ago 7
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

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



Here is the example:
enter image description here


Stylized
<div
has
z-index: 2;
,
<input type="range">
has
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.

Answer

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;
  position:relative;
}

JSFiddle Demo

Comments