CODEWITHSUNDEEP
htmlcsssearch
Harsha M V
Harsha M V

Reputation: 54949

Search Bar with background graphics

I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.

enter image description here

Upvotes: 0

Views: 1752

Answers (2)

Abrah
Abrah

Reputation: 361

Add your Html part like this

<div class="searchbox">
   <input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>

css part, download a search box image and replace it with the name

.searchbox input.lightsearch {
    background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    color: #575757;
    font-size: 11px;
    height: 19px;
    margin-top: 24px;
    padding: 2px 5px 2px 24px;
    width: 170px;
}

Upvotes: 1

Joris Kroos
Joris Kroos

Reputation: 451

You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.

So you'd have the following:

<form class="searchbox">
  <input type="text" class="text" />
  <input type="submit" class="submit" />
</form>

Accompanied by the following example CSS

form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }

Upvotes: 1

Related Questions