在文本框上显示搜索图像 [英] Show Search Image over a Textbox

问题描述

您之前可能已经看到过很多搜索框（例如 jQuery API 上的搜索框）在文本框上显示的可点击搜索图标。我如何在语义上实现这种效果？

You've probably seen fancy search boxes before (like the one on the jQuery API) where they have a clickable search icon that appears over the textbox. How can I semantically achieve this effect?

我在一些自定义的Google搜索文本框中看到，它使用文本框上的背景图像，然后它接收焦点，图片。此外，这里的搜索框StackOverflow似乎也使用一个小搜索图标的背景图像。我知道如何做到这一点，很容易，但它不是真的我想要的效果。

I have seen on some custom Google Search textboxes that it uses a background image on the textbox, and then it receives focus and removes the image. Also, the search box here on StackOverflow appears to also be using a background image of a little search icon. I know how to do that, it is easy, but it's not really the effect I want. I'd like to have a clickable icon that lights up on hover and submits the form when clicked.

推荐答案

使用一些HTML类似的工具to this（where ...意味着在你的表单中需要的适当属性）：

Use some HTML similar to this (where ... means put in the appropriate attributes you need for your form):

<form id="search" ...>
    <input type="text" ...>
    <button></button>
</form>

$ b <在形式元素和 position：absolute; right：0 。在按钮上设置背景图片，并使用 text-indent：-9999em 隐藏按钮的屏幕文字。

Then with CSS, set position: relative on the form element and position: absolute; right: 0 on the button. Set a background image on the button and use text-indent: -9999em to hide the button's text off-screen.

如果你想更详细地模拟jQuery的解决方案，我建议为Firefox安装Firebug，并自己检查元素的HTML和CSS。

If you want to emulate jQuery's solution more closely, I suggest installing Firebug for Firefox and inspecting the element's HTML and CSS yourself.

这篇关于在文本框上显示搜索图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！