redline on focus

[davy_yg]

Hello,

How to create a form border like this on focus:

form border

input[type="text"]:focus{ border:1px solid red; 
                        box-shadow: 0 0 1px red;                        
                       }

On type the redline and the font turns blue and the font turns black. How?

[JorgeM]

It looks like that site you reference is using Bootstrap. You can see an example here regarding the blue glow once the input gets focus:

http://getbootstrap.com/2.3.2/base-css.html#forms

If you only care about the red and blue when your input gets focus, you can do this with javascript/jQuery.

You would have to have an event for the focus that turns the border red if there is no text (value) within the input element. You will also need a keypress to check to see if there is text, if there is, change the border to blue.

[paulkd]

Hi,

The page you reference uses bootstrap, which uses the following css for your effect.

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
    border-color: #E9322D;
    box-shadow: 0 0 6px #F8B9B7;
}

I'd never seen the :invalid attribute, so I googled and found this link.