I’m trying to create some OS X like text inputs for my website. They’ve been coming out very nice in CSS3 browsers. The problem is, there is no border and the background is white. So if a browser does not support box-shadow or -moz-box-shadow or -webkit-box-shadow, You wouldn’t be able to tell that it’s a text input, you wouldn’t be able to see it. I need a border for non CSS3 browsers only…
To get a better idea here is the CSS I wrote: http://jsfiddle.net/wUMDG/
Is that possible?
I forgot to mention, adding a border makes it ugly… so I don’t want to show the border if it’s CSS3.
i suggest placing a border for older browsers. only browsers with CSS3 support will read the CSS3 properties. older browsers will ignore the CSS3.
also, with the
radiusproperty, you can curve the borders. you need not use shadows for curved areas. that way, if the browser does not support CSS3, it will use square borders instead.for more info, check the CSS2 and CSS3 sections:
http://www.quirksmode.org/compatibility.html
UPDATE:
check this fiddle: http://jsfiddle.net/wUMDG/2/
and it will fail as square borders if no CSS3 support. but the blue and grey border will stay