Some CSS styles for your search box II

Some CSS styles for your search box II

In this Post you'll find a set of css stylesheets for your search box. We create this stylesheets months ago as a hobby, and we think that it can be useful for some of you, and if isn't, just watch it and leave a comment to improve this :)

Search box

This is the html code, and every css stylesheet applies to this little code snippet.

  1. <form class="buscador">
  2.    <div class="caja">
  3.       <fieldset>
  4.          <legend>Buscador</legend>
  6.          <label for="input_q">
  7.             <span>Búsqueda</span>
  8.             <input type="text" id="input_q" name="q" value="">
  9.          </label>
  11.          <input type="submit" value="Encontrar!">
  12.       </fieldset>
  13.    </div>
  14. </form>

Use the buttons below to change the css stylesheet and watch the source css code:


Four years ago we wrote a Post in which we share another set of CSS stylesheets for searchbox, you can look it at this url Some CSS styles for your search box.

If you want to explore further on things about Search boxes or Search engines, we have a tutorial in wich we explain how to create a search engine:

  1. With the Flavor PHP Framework ( How to create an Ajax Live Search With jQuery and Flavor PHP.
  2. From the scratch with PHP: How to create an ajax live search

We'll be glad to know what do you think about everything on Mis Algoritmos, if you can suggest a css stylesheet for this Post, we can publish it with your name or link to website, just send us an email to contacto [at] mis-algoritmos [dos] com, or leave a comment in the box just down here.

Be cool and leave a comment :)

There are 7 comments. for this entry.