• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Create beautiful form fields using CSS and images
CSS Custom Search Box

Create beautiful form fields using CSS and images

Programming August 24, 2008 by Sravan Kumar Kandagatla

Web Designers or developers care more for site design, colors, the arrangement of the form elements, User Interface, etc. rather than designing cool, pleasant, and great-looking forms as they give designing form elements as the lowest priority.

Even though very few designers concentrate on form look and feel, in reality, it makes a lot of difference in many applications. Few do styling form fields with simple CSS tricks and one thing is for sure.. making them browser compatible is a bit tough job!

This tutorial will teach you how to create good-looking rounded corner forms by using the beauty of CSS and images. This is not confined to just beautifying the search box but this basic tutorial will help you to build custom good looking forms. So, let’s play with custom look input fields and buttons with images :)

Although there are a couple of interesting tutorials all around the web to create good-looking forms, this will be a good tutorial for starters or for designers or developers who wants to know on how it works, etc. If you’re ready to dive deeper into CSS and get the perfect form, take a look at this article which covers a wide range of topics on form design.

Let’s start to make a custom good looking and simple CSS and image-based search box:

1. Create a simple form (HTML) that contains a text input field and a button, below is the code on how it looks like

 

As you might have observed in the above code you might have a doubt why do we need a DIV with search as an Id? right? – let me clear it, this is just to take the reference of CSS not to overwrite other form elements if you have many fields on a page. You can have your own div tags and different looks n feel for each form element etc. You can even apply CSS class, as we gonna make it simple we just avoided all those in the forms and CSS to reduce the load of HTML form rendering.

2. CSS Style sheet to render the above form

#search {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	padding:35px 35px;
	border: 1px solid #CCCCCC;
	width: 330px;
	height: 40px;
}
#search input {
	font-family:Arial, Helvetica, sans-serif;
	background:transparent url(images/bg-search.png) no-repeat scroll 0 0;
	border:none;
	font-size:1.0em;
	color:#444444;
	padding:6px 10px 8px 10px;
	width:182px;
	float:left;
}
#search input:focus, #search input:hover, #search button:focus, #search button:hover {
	background:transparent url(images/bg-search.png) no-repeat scroll -312px 0px;
}
#search button {
	font-family:Arial, Helvetica, sans-serif;
	background:transparent url(images/bg-search.png) no-repeat scroll -202px 0px;
	border:none;
	font-size:1.0em;
	color:#952200;
	padding:0px 10px 0px 10px;
	font-weight: bold;
	height:32px;
	width:110px;
	float:left;
}
#search button:focus, #search button:hover {
	background:transparent url(images/bg-search.png) no-repeat scroll -514px 0px;
	color:#fff;
}

Let me explain the above CSS Stylesheet –
– “#search” makes a simple box around the form you can even avoid this.
– “#search input” refers to the input field within the search id div box. Observed the background? there comes your own custom image background for the form fields.
– I have used the single image to represent this search box to avoid loading multiple images either on mouse over or mouse out etc.
– Just played with the position of the image to represent the form elements as you can observe “-312px”, “-202px”, “-514px”, “0px” etc.
– And the rest I think you can change based on the look n feel of your site like font-family, height, width, font-size, color, padding, etc.

Summary: Hope you learn a few tips from the tutorials, like it? then spread the resource all over the web.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • 18 Free Open Source CSS Dropdown Navigation Menus
  • CSS Front-end Responsive Frameworks and Grids Compared
  • Giveaway: 3 Jumpeye Framework Licenses for responsive websites

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Grammarly - AI-powered writing assistant
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Can Bollywood have a Batman or Superman?
Next Post: Who will be the boss at Big Boss 2? »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for MikeMike says

    August 24, 2008 at 9:42 pm

    broken in safari 3.1.1 bud

  2. Profile picture for adminadmin says

    August 24, 2008 at 10:10 pm

    Good find Mike – It works well with latest Internet Explorer and Firefox…..

  3. Profile picture for DakeDake says

    August 25, 2008 at 4:42 pm

    Broken in Opera, too.

  4. Profile picture for adminadmin says

    September 3, 2008 at 2:57 pm

    and Works pretty well in Google Chrome :)

  5. Profile picture for MEME says

    September 12, 2008 at 3:55 am

    How about CSS that changes the colour of an inoput box onfocus ?
    I tried one or two but they never work.

    PS if youre so gr8 at CSS why am I typing in a grey font on a grey bkg ?

  6. Profile picture for BrandonBrandon says

    October 7, 2008 at 10:48 pm

    Adding to the “works in” talks, I tried it in FF3 and it worked great! But in IE 7 when you get to the end of the input field with your typing, the image hangs and pushes left, creating a nasty little eye sore :(

  7. Profile picture for Mike McNallyMike McNally says

    January 6, 2009 at 12:05 am

    It behaves quite badly when font size changes (ctrl + mouse wheel). Accessibility is important.

  8. Profile picture for East2WestEast2West says

    March 19, 2011 at 8:34 am

    Lol… adding your Google Adsense code inside your demo download (index.html) is not only unprofessional but smells of desperate – it is also against the Adsense TOS

    Perhaps you think you will make money from this scraped content but I think it is too obvious here…

    Thumbs down for you – Unprofessional Amateur!

  9. Profile picture for StarterStarter says

    February 28, 2012 at 9:50 pm

    Is this tutorial only for CSS only?

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure