Vista-like styled input fields through CSS

Vista-like styled input fields through CSS – css, vista, input, select, textbox, firefox

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...

  1. input[type=text], textarea, select {
  2.     padding: 2px;
  3.     border: 1px solid;
  4.     border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  5.     -moz-border-radius: 1px;
  6. }
  7.  
  8. input[type=text]:focus, input[type=text]:hover, textarea:focus, textarea:hover, select:focus, select:hover  {
  9.     border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
  10. }

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

End result in Firefox:

Tags:
css, vista, input, select, textbox, firefox
Author rcz • Time Feb 11, 2008 • Comment on 'Vista-like styled input fields through CSS' Add comment • Bookmark 'Vista-like styled input fields through CSS' Bookmark • Permalink to 'Vista-like styled input fields through CSS' Permalink
Bookmark 'Vista-like styled input fields through CSS' to Netvouz Bookmark 'Vista-like styled input fields through CSS' to Facebook Bookmark 'Vista-like styled input fields through CSS' to Furl Bookmark 'Vista-like styled input fields through CSS' to Technorati Bookmark 'Vista-like styled input fields through CSS' to Stumble Upon Bookmark 'Vista-like styled input fields through CSS' to Digg Bookmark 'Vista-like styled input fields through CSS' to Del.icio.us
Bookmark 'Vista-like styled input fields through CSS' Bookmark

Comments (1)

Comment author sanjay • Comment author email sanjaygupta111<at>gmail.com • Time Aug 19, 2008 11:17 GMT • #1
excellent :) but it's not working on IE. If any option for IE please suggest me my email id is sanjaygupta111@gmail.com

Thanks

Add comment

Your name
Your email or website (optional)
Icon
Confirmation code
Confirmation code
Message
face:happy face:glasses face:devilgrin face:crying face:grin face:laughing face:sad face:kiss face:shocked face:wink face:monkey face:angel