4

Vista-like styled input fields through CSS

css vista input select textbox firefox
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:

Javascript datepicker Calender Eightysix released
Add comment ↓

Comments (4)

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.
eboy
Aug 1, 2010
You forgot about safari/webkit/chrome! Here are my changes: 


input[type=text], textarea, select {
	padding: 2px;
	border: 1px solid;
	border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px; /*Safari/webkit/chrome */
	border-radius: 1px; /* When the standards are supported. */
}

input[type=text]:focus, input[type=text]:hover, textarea:focus, textarea:hover, select:focus, select:hover {
	border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
	outline: none; /* So theres no glow around the input element */
}
Alfred Mansour
Aug 31, 2010
It is really nice, thanks for your code. farmville cheats

Add comment

Message
Name
E-mailaddress – optional, used for Gravatar
Confirmation code
Confirmation code