Rounded corners on textfield
in [CSS]
|
From: Bergamot on 20 Dec 2007 19:56 Evertjan. wrote: > > <input style='font-size:15pt;height:20px;' value='Testing'> I pity the users of a form formatted like this. I've used plenty that were set with a silly fixed height. Usability is degraded at best. Many become totally unusable. :-( -- Berg
From: Nik Coughlin on 21 Dec 2007 00:35 "Gregor Kofler" <usenet(a)gregorkofler.at> wrote in message news:88d56$476ab521$557fb479$32420(a)news.inode.at... > Simon meinte: >> Hello, >> >> How can I convert all those ugly textfields into nicelooking textfields >> with rounded edges? (Like the buttons in IE7) >> > > You can't. (Well some background-image workarounds are available, but will > break rather sooner than later.) You can. In order to be accessible and bulletproof you need some custom javascript to create a text field that looks however you like, resizes gracefully etc. and degrades to a standard text field for those without javascript. However I am on holiday and am not going to provide an example, normally I would but a little work with Google will find you plenty of starting points.
From: Evertjan. on 21 Dec 2007 03:49 Bergamot wrote on 21 dec 2007 in comp.infosystems.www.authoring.stylesheets: > Evertjan. wrote: >> >> <input style='font-size:15pt;height:20px;' value='Testing'> > > I pity the users of a form formatted like this. I've used plenty that > were set with a silly fixed height. Usability is degraded at best. Many > become totally unusable. :-( Good for you, my example shows that one does not need a background picture to write a totally useless input script. Try increasing the font-size to 40pt ! ;-) -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress)
From: Petr Vileta on 21 Dec 2007 09:58
Chris Beall wrote: > "Evertjan." <exjxw.hannivoort(a)interxnl.net> wrote in message > news:Xns9A0CB72A45EA7eejj99(a)194.109.133.242... >> Simon wrote on 20 dec 2007 in >> comp.infosystems.www.authoring.stylesheets: >> >>> How can I convert all those ugly textfields into nicelooking >>> textfields with rounded edges? (Like the buttons in IE7) > (snip) >> >> Please try this CSS example: >> >> <http://hannivoort.org/test/InputRoundedCorners.asp> >> >> -- > Evertjan, > > Your example lays text over an image, which looks nice, UNLESS the > text is not the size youe expect. Since the user can increase the > text size (without altering the image in IE and FF), large text will > overflow the image. > I use tables for this efect. +---+------+---+ | A | B | C | +---+------+---+ | H | text | D | +---+------+---+ | G | F | E | +---+------+---+ To A, C, E, G cells I place a round corner images and this table cells must have widh and height in pixels definitions in style. To B, D, F, H cells I place a horizontal or vertical background images with appropriate repeat-x or repeat-y style ant width and height are defined as auto. When visitor increase a font size then table is resized as needed and still look as you want. -- Petr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> |