html - 重叠元素 - 表格在前面，但光标在后面

Question

我有一个带有输入字段的表单。虽然输入字段在前面，但文本光标似乎在后面。我尝试了各种 Z-index 组合，但没有用，因为对象已经在前面了。如何让光标在前面？我知道我在做一些微不足道的错误，但我无法将其放置

代码片段:

.searchBox {
  background-color: #7e7e7e;
  border: medium none;
  color: #fff;
  font-family: arial;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  height: 24px;
  padding-left: 10px;
  position: absolute;
  width: 38.7%;
  z-index: 3000;
}

.searchIconBox {
  background-color: #7e7e7e;
  height: 24px;
  margin-top: 0;
  padding-left: 5px;
  padding-top: 3px;
  width: 5%;
}

<div style="width:49%;">
  <form style="width:94%;" class="pull-left">
    <input type="text" class="searchBox" placeholder="Search"></input>
  </form>
  <div class="pull-right searchIconBox">
    <asset:image src="search.png" />
  </div>
</div>

Answer 1

光标不会落后。它伪装成颜色 #7e7e7e

尝试给颜色

.searchBox{
    background-color: yellow;
}

然后悬停光标，你会看到它是可见的