Administration: Better targeting for required form field highlighting.

Previously, any `input` or `select` inside of a `.form-invalid` wrapper would get the red border highlighting, including submit buttons which was not visually correct. This now only applies to form elements with a class of `.form-required` inside of the `.form-invalid` wrapper. It also continues to apply the border to elements with both classes (`.form-invalid.form-required`) as that is how some of the admin markup is structured.

Plugin authors may need to do the same sort of class application seen in this commit, i.e. add `.form-required` to certain form elements.

Props sabernhardt, dilipbheda, helen.
Fixes #50686.

Built from https://develop.svn.wordpress.org/trunk@49283


git-svn-id: http://core.svn.wordpress.org/trunk@49045 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
2020-10-23 15:05:09 +00:00
parent c575f66422
commit 4847fb4263
8 changed files with 22 additions and 18 deletions

View File

@@ -239,10 +239,12 @@ textarea[readonly] {
color: #72777c;
}
.form-invalid input,
.form-invalid input:focus,
.form-invalid select,
.form-invalid select:focus {
.form-invalid .form-required,
.form-invalid .form-required:focus,
.form-invalid.form-required input,
.form-invalid.form-required input:focus,
.form-invalid.form-required select,
.form-invalid.form-required select:focus {
border-color: #dc3232 !important;
box-shadow: 0 0 2px rgba(204, 0, 0, 0.8);
}