CSS Z-index在输入字段中不起作用

Question

我有一个带有自定义占位符的输入字段。由于IE和Mozilla问题，我将其自定义。

因此，基本上，有一个输入字段带有一个绝对位置为<span>的元素，以使其完全适合该输入字段。

但是，当我专注于输入字段时，焦点将转到span元素。我尝试使用z-index，但是没有用。请帮忙。我只希望光标集中在输入字段上，而不是span元素上。

#placeholder {
  position: absolute;
  top: 12px;
  left: 0;
  padding-left: 10px;
  font-size: 11px;
}

<input type="text" style="position: relative;">
<span id="placeholder">Type and Hit Enter to Search...</span>

Answer 1

只需使用label来包装两个元素。您还可以调整一些CSS，以使跨度消失在焦点上：

label {
  position:relative; /*Make the span positioned relatively to the label*/
}
#placeholder {
  position: absolute;
  top: 4px;
  left: 0;
  padding-left: 5px;
  font-size: 11px;
}

/*On focus change the z-index*/
input:focus + #placeholder {
  z-index: -1;
}

<label>
 <input type="text">
 <span id="placeholder">Type and Hit Enter to Search...</span>
</label>

Answer 2

pointer-events: none是您这里需要的。使得纯CSS无法点击元素。

pointer-events方法：

#placeholder {
  position: absolute;
  top: 12px;
  left: 0;
  padding-left: 10px;
  font-size: 11px;
  pointer-events: none;
}

<input type="text" style="position: relative;">
<span id="placeholder">Type and Hit Enter to Search...</span>

<IE11的后备替代方案：

input {
  position: relative;
}

input:hover+span {
  display: none;
}

#placeholder {
  position: absolute;
  top: 12px;
  left: 0;
  padding-left: 10px;
  font-size: 11px;
}

<input type="text" style="position: relative;">
<span id="placeholder">Type and Hit Enter to Search...</span>