How to use css3 to achieve the color gradient glow effect of the input input box

This article mainly introduces how to use css3 to achieve the color gradient glow effect of the input input box. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

css3 is launched It's been a long time, although the major mainstream browsers are not very compatible with it, especially IE... But by adding a prefix like -moz- -webkit-, you can get better results under chrome and Firefox, which is still implemented by Transition Transition effect

Achieve a click color gradient effect for the border. This is not just a simple box-shadow attribute. Its glow is like a uniform glow around it. It also includes a slow glow transition effect.

Before continuing to learn, you must have some basic knowledge of Css3. To do all this, you need to understand the Shadow, RGBa, and Transition properties of CSS3, otherwise you will not be able to understand it.

1. Create a glowing border text box effect

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

Then we want this input component to glow around when it becomes the focus (click) and display For blue, I just 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,.75);
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);
}

and that’s it. The RGB colors can be changed according to personal taste.

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

If you want all text input boxes in a web page to have this effect, just set the CSS globally That’s it.

Add this sentence to your CSS file:

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

How to use CSS3 to create a simple 3d translucent cube image

##How to use CSS3 with IE filter Mirror achieves gradient and projection effects

The above is the detailed content of How to use css3 to achieve the color gradient glow effect of the input input box. For more information, please follow other related articles on the PHP Chinese website!