输入字段内的可点击图标 [英] Clickable icon inside input field

问题描述

我有一个搜索输入字段，里面放有一个放大镜作为背景图片。

I have a search input field with a magnifying glass inside the box as a background image.

我想要做的是使放大镜可以点击以提交表单。

What i'm trying to do is make the magnifying glass clickable to submit the form.

图标位于字段右侧的文本输入字段中。

The icon is inside the text input field on the right of the field.

如果有帮助，网站使用jquery和blueprint css框架。

If it helps, the site uses jquery and blueprint css framework.

推荐答案

使用背景图片触发表单提交并不漂亮。

Making a background-image trigger a form submit is not pretty.

更好的方法是在输入之外放置一个常规提交按钮，它看起来像按钮是在里面。这也将保留可访问性（例如盲人用户将能够使用您的网站），并按Enter将自动在所有浏览器中提交您的表单。

A better approach is to place a regular submit button outside the input, then style things to make it look like the button is inside. That will also preserve accessibility (e.g. blind users will be able to use your website), and pressing Enter will submit your form automatically across all browsers.

请参阅下面的代码，或查看此jsFiddle 的工作概念证明。

See the below code, or check out this jsFiddle for a working proof-of-concept.

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

这篇关于输入字段内的可点击图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！