Bug 231503 – REGRESSION (r282451): [iOS] Cannot override background of search inputs with 'appearance: textfield'

• Component: Forms
• Status: RESOLVED FIXED

[David Gölzhäuser]

Our application uses Transparent <input> elements, starting iOS 15.1 setting the background-color to transparent in the unfocused state will result in a white background color

[Radar WebKit Bug Importer]

<rdar://problem/84110684>

[Alexey Proskuryakov]

Could you please provide a complete test case?

[David Gölzhäuser]

Just head over to our Demo Miniserver http://demominiserver.loxone.us:7785 and login with user "web" and password "web".

After everything is loaded you can simply open the search bar (upper right corner). You may need to lose focus by clicking on the black background down below.

No worries, this is not a real house, so you can basically click everywhere:)

[Aditya Keerthi]

Thank you for the test case. I can reproduce the issue.

The behavior you’re seeing is specific to <input type=search> with -webkit-appearance: textfield (which is specified in misc.css). In iOS 15, this combination yields a background color matching the default background color of <input type=text> (white). This was done so that pages which didn’t specify a background color for an <input type=search> (which has a new default background color in iOS 15), but wanted to retain the standard textfield appearance, would be able to do so. However, it appears that the change also limited styleability for that combination.

The issue does not reproduce when the search field is focused, due the following rule:

body.dark-mode :focus {
	-webkit-appearance: none;
	outline: 0;
}

Which drops the <input type=search> / -webkit-appearance: textfield condition leading to the white background.

I’m looking into a fix to restore the original behavior. In the meantime, you should be able to use one the following workarounds:

1. Use <input type=text> instead of <input type=search>
2. Specify `-webkit-appearance: none;` on the search input in misc.css (instead of `textfield`)

[Aditya Keerthi]

Created attachment 442639 [details]
Patch

[EWS]

Committed r284984 (243631@main): <https://commits.webkit.org/243631@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 442639 [details].

[Aditya Keerthi]

*** Bug 233180 has been marked as a duplicate of this bug. ***