输入字段内的可点击图标

Question

我有一个搜索输入字段,框内有放大镜作为背景图像.

我想做的是使放大镜可点击以提交表格.

该图标位于该字段右侧的文本输入字段内.

如果有帮助,该站点使用jquery和blueprint css框架.

Answer 1

制作背景图片触发表单提交并不漂亮.

更好的方法是在输入之外放置一个常规提交按钮,然后设置样式以使其看起来像按钮在里面.这也将保持可访问性(例如盲人用户将能够使用您的网站),按Enter键将自动在所有浏览器中提交您的表单.

请参阅下面的代码,或查看此jsFiddle以获取可用的概念验证.

<style type="text/css">
.search_field {
    display: inline-block;
    border: 1px inset #ccc;
}

.search_field input {
    border: none;
    padding: 0;
}

.search_field button {
    border: none;
    background: none;
}
</style>

<div class="search_field">
    <input name="q" />
    <button type="submit"><img src="magnifying_glass.png" alt="Search" /></button>
</div>

Answer 2

2017 更新 CSS3 HTML5（和可选的引导程序）

提琴手

jsfiddle 带勾选框

我不喜欢当前答案的美感，任何来到这里寻找使用 bootstrap 或 font-awesome（或您自己的 SVG 图形）的解决方案的人。

该示例无需引导程序即可工作，但是搜索符号的字体图标将不存在。

css

html {
  /* to make rem sizes behave */
  font-size: 10px;
}

.input-with-icon {
  /* causes absolute icon div to be positioned correctly */
  position: relative;

  width: 25rem;
  height: 3.2rem;
  box-sizing: border-box;
}

.input-with-icon .form-control {
    height: 100%;
    width: 100%;
    padding-right: 3.65rem;
    box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;

  /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
  right: 0.3rem;
  top: 0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.3rem;

  /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

html

<div class="input-with-icon">
  <input type="text" class="form-control" value="thing">
  <div class="btn btn-default icon"><span class="glyphicon glyphicon-search"></span>
  </div>
</div>

为图标添加一个处理程序以导致根据需要发生提交操作，但这超出了这个问题的范围......