hi,
how can I make rounded text input fields with css ?
thanks
A:
With CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
Sarfraz
2010-07-07 09:36:01
A:
Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp
KPM
2010-07-07 09:36:08
A:
in modern css3 browsers
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
in older you'll need to use a JS like jquery with rounded corners plugin or Ruzee
helle
2010-07-07 09:37:19
A:
Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...
rabidmachine9
2010-07-07 09:40:22
A:
Both answers are correct you can either use CSS3 styles (which aren't really supported with the current IEs) or you can use a javascript package such as http://www.malsup.com/jquery/corner/.
There is however another option, which shouldn't be discarded even though it's not exactly ideal. If your inputs are of fixed length you can also draw whatever background (including borders) you want for your inputs into an image and use
background: transparent url(pathToYourImage.png);
border: none;
This has the benefit of working on pretty much all browsers you can think of.
Joonas Trussmann
2010-07-07 09:42:19
hi, the plugin you suggested is cool, and I'm using it for divs. However I'm afraid it doesn't work for text-input fields... any tip ?
Patrick
2010-07-07 16:08:50
Just wrap your inputs in a div?
Joonas Trussmann
2010-07-08 07:59:14
no it doesn't work. The wrapper is modified, but it is just placed behind it..
Patrick
2010-07-08 09:50:47
actually it works in Safari, but not in Firefox
Patrick
2010-07-09 18:12:53
Do you mean that the rounded div is placed behind the input? In that case just make the input transparent (see my previous example, just omit the url() part). If it's something else a link to a demo would be nice.
Joonas Trussmann
2010-07-12 08:00:09
A:
^ that last one will work on all browsers. However some browsers add an outline! Chrome, safari etc.
I know you can turn off the outline in chrome using outline:0, but there is no way that I found where you can turn off the outline in Safari. It will look hideous in it!
nick
2010-07-07 09:46:19