Question

假设只有CSS可以...但想知道是否有人可以共享代码。

猜测放大镜是背景图像，但需要使用javascript删除焦点上的“搜索”。

另外......当你点击“返回”而不是需要“搜索”提交按钮时，如何让它提交？

Answer 1

涉及多个元素。

使用Chrome DevTools（F12）检查这些内容。

Answer 2

那里几个问题：

提交返回，如果您在表单中输入输入，并专注于所述输入，当您按Enter键时，浏览器将默认提交表单。
文字屏蔽。你可以在jquery或任何其他框架中轻松完成。基本上你会删除焦点上的文本“搜索”，但只删除那个文本，所以如果有类似“foo”的东西，它就不会取代它。

您的文字屏蔽需求：text mask

Answer 3

您可以使用新的input类型。

<input type="search" placeholder="Search" results="0" />

'results'属性将在WebKit浏览器中添加放大镜图标。

Answer 4

查看 - ＆gt;页面来源。

说真的，就在那里。

Answer 5

USE THIS: <input type="image" src="/_i/mag.png" alt="Search">

EXAMPLE CODE:
<form class="form-inline my-2 my-lg-0">
  <input type="image" src="data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path></svg>" alt="Search">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

你是怎么把放大镜和“搜索”放在stackoverflow的搜索框中的？

5 个答案: