CSS3 Input styling

Question

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.

Adding a 1px border doesn't affect the look at all. Make it 1px and almost a very light gray. — Michael Rader
– Michael Rader, Commented Dec 29, 2011 at 1:33
The term CSS3 is being used very loosely here. The prefixed properties, for one, aren't even part of the spec. And what defines a CSS3 browser? — BoltClock
– BoltClock, Commented Dec 29, 2011 at 1:34
IE7 and IE8 support advanced attribute selectors and the general sibling combinator, which, @fskreuz, are level 3 selectors. IE5+ supports overflow-x/y and word-wrap. These must be CSS3 browsers too, right? The point I'm making here is to be careful not to use the term too loosely or naïvely. Most browsers support some CSS level 3 modules here and there, so you can't simply say this browser supports CSS3 and that doesn't. It's just way too fragmented. — BoltClock
– BoltClock, Commented Dec 29, 2011 at 2:10

Matt Cashatt · Accepted Answer · 2011-12-29 01:33:16Z

3

Take a look at CSS3 Pie:

http://css3pie.com/

It should help you out in most cases.

answered Dec 29, 2011 at 1:33

Matt Cashatt

24.3k29 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

henryaaron Over a year ago

Maybe... I was against it originally because I was going for light weight, and a bunch of htc files wouldn't be part of the principle, but I just remembered other browsers do not support the behavior attribute and wouldn't download the file... so maybe...

henryaaron Over a year ago

Unfortunately, box-shadows do not work on inputs on the iPhone, iPad and possibly other mobiles. So I ended up using both borders and PIE. However, I feel compelled to accept a border answer...

Joseph · Accepted Answer · 2011-12-29 01:43:37Z

0

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 radius property, 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

edited Dec 29, 2011 at 1:43

answered Dec 29, 2011 at 1:35

Joseph

120k31 gold badges186 silver badges238 bronze badges

4 Comments

henryaaron Over a year ago

You don't get it, I want OS X like so I want the shadows. But I need a fallback for IE6, IE7 & IE8. Under breath "Internet Explorer" (rolls eyes)...

Joseph Over a year ago

well, that's your only fallback using plain CSS. older browsers like IE6, 7 and 8 do not understand CSS3 and thus not render your shadow. otherwise, you have to use image backgrounds.

T I Over a year ago

here's my fiddle similar concept though left in the shadow on focus

Joseph Over a year ago

@TomIngram the shadows and focus have a fallback but the curved border won't

Collectives™ on Stack Overflow

CSS3 Input styling

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related