Bug 187808 - CSS rule not applied for non-button elements with -webkit-appearance set to 'button'
Summary: CSS rule not applied for non-button elements with -webkit-appearance set to '...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 11
Hardware: Macintosh macOS 10.13
: P2 Normal
Assignee: Nobody
URL: https://next.plnkr.co/edit/wYsCEVvT3e...
Keywords:
Depends on:
Blocks:
 
Reported: 2018-07-19 09:28 PDT by Yogesh Mangaj
Modified: 2019-01-23 12:27 PST (History)
3 users (show)

See Also:


Attachments
Screenshot across multiple webkit based browser vs Firefox gecko (151.23 KB, image/jpeg)
2018-07-19 09:28 PDT, Yogesh Mangaj
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Yogesh Mangaj 2018-07-19 09:28:25 PDT
Created attachment 345351 [details]
Screenshot across multiple webkit based browser vs Firefox gecko

CSS rule that changes background is not being applied for on a non-button element.

To reproduce, use the following example (available at https://next.plnkr.co/edit/wYsCEVvT3eJgSRre?preview) -
HTML:
```
<div class="btn" type="submit">Hello world</div>
<button class="btn" type="submit">Hello world</div>
```

CSS:
```
[type="submit"].btn {
  background-color: red;
}

[type="submit"] {
     -webkit-appearance: button;
}
```

The div.btn does not have a red background, expected that it should have a red background.
Comment 1 Simon Pieters 2019-01-23 12:27:30 PST
background-color only disables appearance on actual buttons, not divs. I think this is reasonable/by design. If you want the 'none' appearance on a div, don't set it to 'button'.