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

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Services
  • Newsletter
WittySparks / Technology / Programming / Create beautiful form fields using CSS and images

Create beautiful form fields using CSS and images

Updated: February 4, 2023 by Sravan K • 2 min read

CSS Custom Search Box

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 feels, 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 their 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.

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

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

Follow Us

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

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy