nathansmith/formalize — Issue #46: input:focus styling not applied when focusing on invalid elements
Author: kdonald
Created: 2012-01-30 00:37:51+00:00
State: open

I have a form that has several "required" fields (the HTML5 attribute 'required' present). When focusing on one of these fields to enter a value, the field is not highlighted like you would expect. This appears to be because the following "input:invalid" styles are resetting the input:focus box shadow:

input:invalid,
button:invalid,
select:invalid,
textarea:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}

Removing the above styles gives me a focus highlight behavior I expect. I'm not sure if the current behavior is intentional... I found it a little odd so I thought I would report it.