CSS: Input Border Glow

[Vick98]

I have tried to add this code to the additional.css template but with no luck. Could anyone help with this or create a mod for it. Thank you.



To apply the look to your own site, use the code below, replacing the red colour values with something that matches your own theme.

The code:

 .input-text input, .input-textarea textarea { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:#CC3030 1px solid; outline:none; padding: 2px; border-radius: 5px; margin: 2px; border:1px solid rgba(204,48,48, 0.5); 

} 

.input-text input:focus, .input-textarea textarea:focus { box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -webkit-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -moz-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -o-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -ms-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:1px solid rgba(204,48,48, 0.8); 

} 

.input-text, .input-textarea {background: none; border: 0;}

Notes:

I've used rgba(204,48,48, 0.8) for the border and shadow colour. This is my normal red, in RGB instead of Hex, with the last number representing the Alpha, or transparency. Alpha of 0.8 = 80% opaque/20% transparent.
There's a handy HEX to RGB converter here for those, like me, who know their site colours in HEX only.
This code will affect all text boxes and text areas on your site.


CSS Transitions

Transitions are very powerful, and you can do some pretty creative things with them. Or you can just apply them to the links on your site for a nice effect.

http://net.tutsplus.com/tutorials/ht...3-transitions/
http://css3.bradshawenterprises.com/

[Lynne]

We can't test that on our own sites to see what is up since you have a custom style. We would need a link to your site to view the problem.