How to use CSS3 to implement the color gradient glow effect of input box

This article mainly describes how to use CSS3 to achieve the input box color gradient glow effect, has a certain reference value, now share to everyone, the need for friends can refer to

CSS3 have been introduced for a long time, although the major mainstream browser for its compatibility is not very good, especially ie ... But by adding-moz--webkit-such prefixes can get better results under Chrome and Firefox, or the transition effect of transition implementation

Click the color gradient for the bounding box, which is not purely a Box-shadow property, it glows like a homogeneous glow around it, and it also contains a slow glow transition effect.

You must have some basic knowledge of CSS3 before you continue to study. Doing all this requires you to understand CSS3 's shadow and RGBA, transition attributes, otherwise you won't understand.

1. Create a glowing border text box effect

<input type= "text" class= "Sdw"/>

And then we're going to make this input component glow around when it's in focus (click), blue, and I just need to add a piece of CSS code:

Sdw:focus{transition:border linear. 2s,box-shadow linear. 5s;-moz-transition:border linear. 2s,-moz-box-shadow Linear .5s;-webkit-transition:border linear. 2s,-webkit-box-shadow linear. 5s;outline:none;border-color:rgba (93,149,242,. box-shadow:0); 0 8px Rgba (93,149,242,.105);-moz-box-shadow:0 0 8px Rgba (93,149,242,.5);-webkit-box-shadow:0 0 8px Rgba (93,149,242,3);}

You can do it. The RGB color can be changed according to individual tastes.

2. Add a border glow effect to all input components globally

If you want all text input boxes in a Web page to appear this effect, just CSS global settings.

Add this sentence to your CSS file:

input[type=text]:focus,input[type=password]:focus,textarea:focus{}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!