It can be challenging to achieve good design aspects for the form controls like select drop down, input box, submit buttons, etc
But with the help of Cascading Style Sheet (CSS), it has become very easy to assign different look and feel to the form controls which comes by default in a plain look and feel.
In this article we will talk about two different styling effects
1) Giving background image to the input box to give completely different feel and make it consistent with the website design
2) Giving background repeating background image to the submit buttons to give consistent feel with the web design
Background image to the input box
To achieve the following effect
You first need to create the background image and save it with the “search_bg.jpg” filename or any other filename and then use the below code into your CSS file to assign the background image to the relevant input box to make look like your website design.
input.search_text {
background:url(../images/search_bg.jpg) 0% 20% no-repeat ;
border:0px;
padding:3px 5px 5px 25px;
height:16px;
width:110px;
}
Repeating background image to the submit box
To achieve the following web design effect
You first need to create a background image cut of 1px width and full height of the button graphic and then use the below code into your CSS file to assign the repeating background to all the buttons on the website to make it compatible to the design what the web designer has created.
input.button {
font: bold 13px Arial, Sans-serif;
letter-spacing:1px;
height: 24px;
padding: 2px 5px 2px 5px;
color: #FFF;
border: none;
background:#a45b06 url(../images/button_bg.gif) repeat-x top left;
}
Finally you use the following code into the relevant HTML page
<form>
<input type=”text”>
<input type=”submit” value=”Search”>
</form>
You can assign the class button to all the buttons of the website (no matter what is the width of the button) and it will work.
The final result will look like below once you complete the process. This will meet the expectations of the web designers.
