Blog

Your one stop resource for tips, tricks and news on Search, Social & Web!

27

Jul 2011

Web design for form controls

Posted by / in Blog, WEB Design / No comments yet

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.

Please select the social network you want to share this page with:

We like you too :)

Passionate about digital marketing and branding. Helping businesses evolve to next level of digital success with niche specific, customer centric marketing strategies. Blogging often to provide latest insights on digital and social marketing and offers actionable tips and tricks to catch the social media and online marketing momentum.

SIMILAR POSTS
No comments yet

Leave a Reply

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