RESOLVED DUPLICATE of bug 305369310023
CSS @scope at-rule does not apply to input elements 
https://bugs.webkit.org/show_bug.cgi?id=310023
Summary CSS @scope at-rule does not apply to input elements
yukiito
Reported 2026-03-16 07:54:31 PDT
Created attachment 478689 [details] Safari result showing input not having red border When an @scope rule specifies a CSS for <input>, it never gets applied. Consider the following HTML which I've also recreated in JSFiddle https://jsfiddle.net/tx0z4kfb/1/: <html> <style> input { border: 1px solid green; } button { border: 1px solid green; } div { border: 1px solid green; } @scope (:root) { input { border-color: red !important; } button { border-color: red !important; } div { border-color: red !important; } } </style> <body> <input placeholder="Input"/> <button>Button</Button> <div>Div</div> </body> </html> The expected result is that all 3 elements to have a green border, and that's how it is in both Firefox and Chrome. However in Safari, the input border stays green as it fails to apply the @scoped CSS rule for the input.
Attachments
Safari result showing input not having red border (9.12 KB, image/png)
2026-03-16 07:54 PDT, yukiito 		no flags
Details
Demo HTML file (436 bytes, text/html)
2026-03-16 08:46 PDT, davidm 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
yukiito
Comment 1 2026-03-16 07:59:50 PDT
Correction with the expected result, all elements should have a red border while input stays green
davidm
Comment 2 2026-03-16 08:46:00 PDT
Created attachment 478691 [details] Demo HTML file
davidm
Comment 3 2026-03-17 05:42:41 PDT
Duplicate of https://bugs.webkit.org/show_bug.cgi?id=305369
Anne van Kesteren
Comment 4 2026-03-18 04:03:50 PDT
Thanks davidm! *** This bug has been marked as a duplicate of bug 305369 ***
Note You need to log in before you can comment on or make changes to this bug.