Hello,
How to create a form border like this on focus:
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?
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.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.