Bug 226218

Summary:	box-shadow does not work on input elements
Product:	WebKit	Reporter:	Bramus <bramus>
Component:	Forms	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	2843035794, akeerthi, cdumez, simon.fraser, webkit-bug-importer, wenson_hsieh
Priority:	P2	Keywords:	InRadar
Version:	Safari Technology Preview
Hardware:	Unspecified
OS:	Unspecified

Description Bramus 2021-05-25 04:47:31 PDT

See demo at https://codepen.io/bramus/pen/1e6d158c6aa97efea1436e36dafa283b

Problem: The box-shadows on the inputs are not rendered.

Tested with Safari TP 124 on macOS 11.3.1

For comparison, behavior in other browsers:

- Chrome: Renders both correctly
- Firefox: Renders only the regular one as expected

Comment 1 Bramus 2021-05-25 04:54:12 PDT

Relevant Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1406017

Note that in Firefox you can get it working by explicitly setting a background-color on the inputs. This workaround does not work with Webkit.

Comment 2 Simon Fraser (smfr) 2021-05-25 20:09:33 PDT

If you set -webkit-appearance: none; we will draw the box shadow.

Comment 3 Radar WebKit Bug Importer 2021-06-01 04:48:17 PDT

<rdar://problem/78709285>

Comment 4 Fujii Hironori 2022-07-19 17:30:43 PDT

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