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;
}

然后将光标悬停，您将看到它是可见的

Answer 2

它对我来说运行正常，光标无法用搜索框的灰色更改为方便的颜色。

尝试类似......

.searchBox{background-color:#d0d0d0;}

，您的光标将更加明显。

Answer 3

你需要在.searchBox中添加更多的填充 - 因为光标可以在图标后面开始：

   .searchBox { padding-left: 25px; }

如果您需要searchBox不向右扩展，请添加box-sizing

   .searchBox { padding-left: 25px; box-sizing : border-box; }

重叠元素 - 在前面形成，但光标在后面

3 个答案: