0

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?

Edited by davy_yg

3
Contributors
2
Replies
13
Views
3 Years
Discussion Span
Last Post by paulkd
0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.