Round corners on an input field?
Is there any way to add round corners to a form input field without affecting accessibility?
Share: 
Most techniques to do this can be done accessibly—all you really need to consider is text resizing. 
Share:
Can not be done with text re-sizing in mind but most users page zoom.
Drop down boxes can not be done without very heavy JavaScript and even then cross platform compatibility is very difficult.
Johan De Silva / Portfolio
Share:
Thanks for the feedback.
The client is going for AA and I think I've managed to convince them that custom form interfaces would be tricky to do (especially as they use IE6).
Share:
You can do it with multiple background images while preserving text resizing, if you are happy with plenty of container elements! Otherwise, border-radius may be a possibility, or perhaps using Nifty Cube (JS solution).
Last edited by Jordan Gray on 03 Jul 2009 02:11 pm; edited 1 time in total
Share:
| Jordan Gray wrote: |
| ... or perhaps using Nifty Corners (JS solution). |
Ugh! I used to use Nifty Corners. Have you seen the amount of generated source code it produces?
Share:
| Code: |
| -moz-border-radius:44px;
-webkit-border-radius:21px; border-radius:44px |
That should work on every significant browser except Internet Explorer. The W3C CSS validator will tell you it's invalid. It isn't, ignore it.
Share:
Thanks for the suggestions.
The project is on an intranet and they ONLY use IE6
Share:
| Gary Miller wrote: | ||
Ugh! I used to use Nifty Corners. Have you seen the amount of generated source code it produces? |
Honestly, I don't mind. It produces the desired effect with a minimum of fuss required on my part, runs very quickly, and doesn't impede accessibility whatsoever.
Also, I only use it for IE—which, after all, deserves no better.
Incidentally, I missed out one technique. With SVG background images, you can achieve fantastic effects like resizable rounded corners, drop shadows, gaussian blurs and various other filters very easily; unfortunately, only Opera supports these to my knowledge.
Share:
Sliding-doors technique is the best way to go, as it allows for text rezising.
http://www.alistapart.com/articles/slidingdoors/
Share:
You can indeed use “Nifty corners”, “Sliding-doors” on form INPUTS but my point was this can not be done with SELECT, RADIAL or CHECK boxes without allot of unreliable JS so there is little point.Johan De Silva / Portfolio
Share: