CSS Style for Textbox, Textarea, Dropdown Box, Submit Button

By | October 22, 2012

Applying CSS Style to textbox, textarea, dropdown box and submit button will enhance the user interface. Without applying style, these input elements won’t looks more catchy. By pure CSS, we can make a better style to the textbox, textarea, dropdown box and submit button.

Below there are two images before applying css and after applying css. You can see how CSS will enhance UI.

 

 

Before Applying CSS

 

After Applying CSS

 

Stylesheet

input[type=’text’] – it represents textbox

 input[type=’password’] – it represents password textbox

input[type=’submit’] –  it represents submit button

textarea – textarea

select – it represents about dropdown box

 

[code type=css]

#text
{
float:left;
width:100px;
}

/*CSS for dropdown box*/
select
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}
select: hover
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*CSS for input textbox and password*/

input[type=’text’], input[type=’password’]
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

input[type=’text’]:hover, input[type=’password’]:hover
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #aaa;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*CSS for textarea*/

textarea
{
width: 200px;
height: 90px;
border-radius: 3px;
border: 1px solid #CCC;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}
textarea:hover
{
width: 200px;
height: 90px;
border-radius: 3px;
border: 1px solid #aaa;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*input type for submit button*/

input[type=’submit’]
{
width: 150px;
height: 34px;
border: 2px solid white;
background-color:#CCC;
}
input[type=’submit’]:hover
{
width: 150px;
height: 34px;
border: 2px solid white;
background-color:#000000;
color:#fff;
}

[/code]

 

HTML

[code type=html]

<html>

<head>

</head>

<body>
<div id=”text”>Text box</div><input type=”text” name=”text” /><br /><br />
<div id=”text”>Textarea</div><textarea></textarea><br /><br />
<div id=”text”>Dropdown</div>
<select>
<option>Option</option>
<option></option>
<option></option>
</select><br /><br />
<div id=”text”>Submit</div> <input type=”submit” name=”submit” />
</body>
</html>

[/code]

10 thoughts on “CSS Style for Textbox, Textarea, Dropdown Box, Submit Button

  1. Alan

    You took an image for the example because you know it would not work in all browsers….Next time show real thing.

    Reply
  2. Aditya Joshi

    Thanks for the tutorial , i really like it , it is what exactly i needed!
    Know me as one of your fan!

    Reply
  3. Shreyas Mulay

    Awsome work Bro!!!!!!! I am roaming from morning on ur blog…Every single thing is very much important…
    I am on a project right now and it ‘was’ looking so simple only images and background seems to b interesting…
    Now after applying all ur stuff it is just rocking like hell… Thanxx a ton Bro…All d best for ur life.

    Reply
  4. Halak

    Really very very helpfull!! searched many links… but this one solved all my queries!!

    Reply
  5. Mike

    Thanks! I’m going to make this for my new contact form on my website. Switching from basic opening the users webmail client with “mailto” function, to using a contact form. Thanks again.

    Reply
  6. Chetan

    Boss you used css3. i used the same css it’s not looking like in the image.

    There must be GADBAD GHOTALA…..

    Reply

Leave a Reply

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

intersoluble-anemotropism