loads of useful information, examples and tutorials pertaining to web development utilizing asp.net, c#, vb, css, xhtml, javascript, sql, xml, ajax and everything else...

 

C-Sharpener.com - Programming is Easy!  Learn Asp.Net & C# in just days, Guaranteed!

Rounded Text Box Inputs - Slick looking and customizable

by naspinski 2/6/2008 10:04:00 AM

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.



Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

css | design | html | steal some code

Related posts

Comments

9/17/2008 11:08:31 PM

cryo

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;

cryo us

9/18/2008 12:54:09 AM

naspinski

I can't wait until CSS3 comes out!

naspinski us

Add comment

Name*
E-mail* (Gravatar)
Website
Country   Country flag

Comment* [b][/b] - [i][/i] - [u][/u]- [quote][/quote]




Live preview

11/19/2008 4:14:59 AM