Rounded Text Box Inputs - Slick looking and customizable

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

 I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good.  Even though they don't really go with any of my sites, I wanted to know how they were done.  I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!). 

 

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier.  It works for single-line textboxes as well as checkboxes.  You could easily take the concept to a multiline textbox if you just added some larger images.  The code is pretty self-explanatory, so I won't get into the details here.  I included the .png files so you can customize the colors if you want - just drop in the code and go.



Comments (2) -

  • CSS code to do this...

    -moz-border-radiusFrownin px);

    works only in FF, but when CSS3 comes out, the command will be
    border-radiusFrown)px;
  • I can't wait until CSS3 comes out!

Add comment

Loading