Member Avatar for davy_yg

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?

Edited by davy_yg
  • 3 Contributors
  • 2 Replies
  • 108 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by paulkd

Dani AI

Generated

As noted, that UI looks like a Bootstrap pattern, and is right to point at HTML5 validity pseudo-classes as the easiest way to get the red/blue behavior without heavy JS. The basic idea: give the input a constraint (for example required or a pattern) so the browser considers it invalid when empty, then combine focus with a validity test to style the border and text differently while the control has focus.

A CSS-only trick that avoids repeating the exact snippets above is to use the placeholder state to detect "has text" while focused (works when a placeholder is present), and fall back to JS for older browsers:

/* CSS: placeholder-based switch (browser support required) */
input:focus:placeholder-shown { border-color: #E9322D; color: #06c; }
input:focus:not(:placeholder-shown) { border-color: #1E90FF; color: #000; }

If placeholder-based selectors are not suitable, use a tiny script to toggle a class on input events and style that class:

document.querySelectorAll('input[type="text"]').forEach(function(el){
  var set = function(){ el.classList.toggle('has-value', el.value.trim() !== ''); };
  el.addEventListener('input', set);
  set(); // init
});

Then style .has-value:focus vs :focus:not(.has-value) in CSS to get blue vs red.

Troubleshooting notes: use devtools to inspect the computed color and border while focused to see which rule or JS is changing them. Watch for browser autofill or UA focus rings (Chrome autofill and focus outlines can alter colors). Never remove keyboard focus indication without replacing it with an accessible alternative.

Further reading on the HTML5 constraint pseudo-classes: MDN :invalid and MDN :placeholder-shown.

Recommended Answers

All 2 Replies

Member Avatar for 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.

Member Avatar for 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 .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.