Question

我试图在输入框内放置一个放大镜。问题是当浏览器调整大小并且输入框在选择框下滑动时，放大镜范围保持在顶部。

<select id="documentscomparator" class="dropdown" name="documentscomparator">
  <option value="LIKE">like</option><option value="EQUALS">equals</option>
  <option value="NOTEQUALS">not equals</option>
  <option value="GREATERTHAN">greater than</option>
  <option value="LESSTHAN">less than</option>
  <option value="BETWEEN">between</option>
  <option value="ISNULL">is null</option>
  <option value="NOTNULL">is not null</option>
  <option value="IN">in</option>
</select>

<span class="magnifyingGlass"></span>

<input type="text" value="">

span.magnifyingGlass {
    width: 1.6em;
    position: absolute;
    margin-top: 3px;
    z-index: 999
}
span.magnifyingGlass:before {
    width: 1.6em;
    content: "⚲";
    font-size: 1.2em;
    text-align: center;
    transform: rotate(45deg);
    display: block;
}
input[type="text"] {
    border-radius: 3px;
    border: 1px solid lightgrey;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative
}

请查看小提琴并调整浏览器大小以查看我的意思： 1 https://jsfiddle.net/u0xyLxog/2/

我得到了什么：

[ span outside of input box on small screen

这就是我想要的样子：

span positioned correctly inside of input box

Answer 1

将input和span放在带white-space:no-wrap的内联块中，以便它们始终粘在一起。我添加了ID oneline 的div。请检查它的样式。（请全屏查看摘录并调整屏幕大小以查看结果。）

span.magnifyingGlass {
    width: 1.6em;
    position: absolute;
    margin-top: 3px;
    z-index: 999
}
span.magnifyingGlass:before {
    width: 1.6em;
    content: "⚲";
    font-size: 1.2em;
    text-align: center;
    transform: rotate(45deg);
    display: block;
}
input[type="text"], input[type="text"].searchable {
    border-radius: 3px;
    border: 1px solid lightgrey;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative
}

#oneline{
white-space:no-wrap;
display:inline-block;
}

#documentscomparator{width:400px;}

<select id="documentscomparator" class="dropdown" name="documentscomparator">
  <option value="LIKE">like</option><option value="EQUALS">equals</option>
  <option value="NOTEQUALS">not equals</option>
  <option value="GREATERTHAN">greater than</option>
  <option value="LESSTHAN">less than</option>
  <option value="BETWEEN">between</option>
  <option value="ISNULL">is null</option>
  <option value="NOTNULL">is not null</option>
  <option value="IN">in</option>
</select>

<div id="oneline">
<span class="magnifyingGlass"></span>
<input type="text" data-storable="document-document" id="document" data-object="document-document" class="nestable searchable storable" name="document" value="">
</div>

Answer 2

几乎得到.. 输入前删除span标签。改变这样的CSS，

.magnifyingGlass::placeholder{
    width: 1.6em;
    font-size: 1.2em;
    text-align: center;
    transform: rotate(45deg);
  }

将类名“magnifyingGlass”添加到输入中，然后将内容设置为占位符

<input class="magnifyingGlass" type="text" placeholder="⚲">

你会得到这样的文本框（点击查看输出）tested output

现在内容（搜索图标）出现在文本框的中间，我试图对齐左边。但它没有用。我正在努力。

Answer 3

我不会详细介绍放大镜图标的实现，但是这里的解决方法是将输入和跨度包装在包含div中，如下所示：

<div class="input-wrapper">
  <input type="text" />
  <div class="icon">
    <span>x</span>
  </div>
</div>

外部包装器必须将位置设置为相对，而内部输入必须具有100％的宽度，这意味着它占据外部包装器的整个宽度。相反，图标div需要将位置设置为绝对位置，将右侧和顶部的位置属性设置为0（它相对于包装器宽度一直向右）。这个.icon div的内容可能是一个span，直接是一个文本，或者你可以直接使用伪元素。

您可以看到结果in this fiddle。

您可以使用包装器类来设置宽度，并根据需要进行设置。

希望这有帮助。

跨度在输入内部的定位 - 在小屏幕上不随输入框移动

3 个答案: