Unexpected styling of elements with :invalid :valid
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: keithjclark, Unassigned)
Details
Steps to reproduce:
I am attempting to select form elements that can be interacted with using this CSS selector:
:valid:not(form,fieldset,button),:invalid:not(form,fieldset,button)
Actual results:
Open this URL. Firefox matches different elements to other browsers: https://codepen.io/keithclark/pen/rNJRPXV
Expected results:
I wasn't expecting <input type="image"> or <input type="submit"> to match the selector since they can't have a valid or invalid state.
Also worth noting that current versions of Chrome and Safari also match <input type="submit">, which I suspect is wrong.
I've looked at the specs but I couldn't establish what the correct behaviour should be
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
I think this is invalid. The spec says:
https://html.spec.whatwg.org/#selector-valid:
- elements that are candidates for constraint validation and that satisfy their constraints
https://html.spec.whatwg.org/#candidate-for-constraint-validation:
- A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation. (For example, an element is barred from constraint validation if it has a datalist element ancestor.)
https://html.spec.whatwg.org/#category-submit:
button, input, select, textarea, form-associated custom elements
So input type=image and input type=submit are submittable elements not barred from constraint validation, and thus should match :valid. But let me know if I'm holding the spec wrong.
Description
•