Geek Answers Handbook

Show search image through text box

You've probably seen fancy search fields before (like one of the jQuery APIs ), where they have an interactive search icon that appears above the text box. How can I semantically achieve this effect?

I saw in some Google Search custom text fields that it uses a background image in a text box, and then it gets focus and deletes the image. In addition, the background image of the small search icon is also used in the search box on StackOverflow. I know how to do this, it’s easy, but this is not the effect that I want. I would like to have a click that lights up on hover and submits the form when clicked.

+1
source share
5 answers

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

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

Then use CSS to set position: relativein the element formand position: absolute; right: 0on the button. Set the background image on the button and use text-indent: -9999emto hide the button text outside the screen.

If you want to more accurately emulate the jQuery solution, I suggest installing Firebug for Firefox and independently checking the HTML and CSS element.

+3
source

This link can help you. It has the full code http://www.cssportal.com/form-elements/text-box.htm

Demo

HTML

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

CSS

body{
    position:relative;
}
.possition
{
    position:relative;
    background:url('http://s9.postimg.org/6upsdsf97/Red_Button1.gif') no-repeat center center;
    width:20px;
    height:20px;
    border:none;
    margin-left:-25px;
    top:3px;
    z-index:999;
}
.text
{
    padding-right:22px;
}
+3
source

PNG. , . , Javascript, ​​ jQuery.

0

- ( , . , .

0

css. , , ..

0

More articles:


All Articles