1514563 - "Form data validation" includes CSS :invalid:focus selector that does nothing

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: General, enhancement, P2)

Description

[rugk]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: 65 Branch
 Technical Contact: 

:: Details

The listed examples include the CSS for invalid styling:

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

The second block, IMHO, however, makes no sense, because "outline: none" is the default. Thus this line changes nothing if I select the input field. 

It could be changed to "box-shadow: none" to do something, i.e. hide the error when the box is selected. However, I don't really know whether this is good practice to not show any error indication when the field is focused, but possibly it is…

Comment 1

[Janet Swisher]

I changed the input:focus:invalid block to have "box-shadow: none", so that while the user is attempting to fix their error, they don't get the red box. If they move focus and the valid is still invalid, then the red box-shadow comes back.