Drop Shadow on Form Input Fields?

[grovesk]

Hi – Can you put drop shadows on the outside of form input fields? I have a project in that includes this in the design. Possible? Not possible? I’ve seen drop shadows in the INSIDE of form fields, but not on the outside. If anyone has any examples, that would be great.

Thanks, Karen

[TheLeggett]

You might need a different solution depending on what browsers you’re going to support, but the CSS3 box-shadow property is definitely worth taking a look at.

https://css-tricks.com/snippets/css/css-box-shadow/

[grovesk]

Thanks. I don’t know why I am so surprised the box shadow model works! Now for an IE solution which I am reading about on Robert Nyman’s site Here

[grovesk]

Just an update on this topic for anyone else out there. I also used CSS3 PIE to get the drop shadows and corners on form fields in IE8 and IE7. CSS3 PIE is worth taking a look at for anyone out there trying to do the same thing.
CSS3 PIE
Karen

[CrownOfMars]

I’ve been using CSS PIE for a while also, its great. One trick you should look into is not applying CSS PIE to every element, but rather apply a specifc CSS PIE class to the element.

For example here’s how i achieve what you are looking for:

.box-shadow-input { -webkit-box-shadow: inset #ddd 1px 1px 2px; -moz-box-shadow: inset #ddd 1px 1px 2px; box-shadow: inset #ddd 1px 1px 2px; behavior: url(/PIE.php); }

I then use javacript to add the class to all input fields, for example:

$('input[type="text"], input[type="password"], textarea, select').addClass('box-shadow-input');

[Johnny1980]

Crownofmars thank you for code, helped me well. I always was using form builder, but now I want to do it my own.

[grovesk]

thanks crown of mars. Nice tip.

[Author]

Posts