Bug 226218 - box-shadow does not work on input elements
Summary: box-shadow does not work on input elements
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 242893 (view as bug list)
Depends on:
Blocks:
 
Reported: 2021-05-25 04:47 PDT by Bramus
Modified: 2022-07-19 17:30 PDT (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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. ***