27 Jan 2020

Stylize search box with simple CSS

To stylize the search/text box, following code will give nice effect. An image is used in the background of search box. CSS is pretty simple. 🙂

.newsearch {
  border: 1px solid #ccc;
  color: #bbbbbb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: url(button_search.png) no-repeat 1px 1px;
  height: 20px;
  padding-left: 22px; 
}

Give correct class name to the search box and thats all.
This is the image used in the background.

Screenshot
styled-search-box

Nilambar

PHP Programmer, WordPress and Laravel Developer, Freelancer and a Blogger.

View all posts by Nilambar →

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.