2

Vista-like styled input fields through CSS

Feb 11, 2008

In every type of browser input fields (text boxes, text areas, selects etc.) look different, which is quite annoying for designers. You could just style the input components, but styling is usually limited on most input fields.

If you like the Vista input field designs, then why not append this look in your design? Here's the CSS to make input fiels look the same as in IE on a Vista machine...

input[type=text], textarea, select {
 	padding: 2px;
 	border: 1px solid;
  	border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
 	-moz-border-radius: 1px;
}
input[type=text]:focus, input[type=text]:hover, textarea:focus, textarea:hover, select:focus, select:hover {
  	border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
} 

 The CSS code works in any browser, but partially in IE6 and border radius only works in Firefox.

End result in Firefox:

Add comment +

Comments (2)

sanjay
Aug 19, 2008
excellent :) but it's not working on IE. If any option for IE please suggest me my email id is sanjaygupta111@gmail.com

Thanks
rcz
Jul 26, 2009
You could implement it with javascript.

Add comment

Message
Name
Confirmation code
Confirmation code