[Webkit-unassigned] [Bug 239033] New: Select Option not respecting font; Always times new roman

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=239033

            Bug ID: 239033
           Summary: Select Option not respecting font; Always times new
                    roman
           Product: WebKit
           Version: Safari 15
          Hardware: Mac (Apple Silicon)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Forms
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jay at conton.io
                CC: cdumez at apple.com, wenson_hsieh at apple.com

Created attachment 457170

  --> https://bugs.webkit.org/attachment.cgi?id=457170&action=review

Movie of bug

I have a select tag in a not-so-unique situation:

1. container div styles the "select"
2. select is actually opacity: 0
3. select options are showing Times New Roman for the font, even though it's all explicitly set

I've attached a video of Safari 15 on the left, and Firefox on the right. The option should at least be SOME sans-serif. No matter what I try it is not happening.

```
// HTML
<div class="RecentPostsStyles_recentPost__select__hnmLS"><select><option value="">All Types</option><option value="blog">Blog</option></select><span>All types</span><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0.25turn);"><path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>

// Sass
.recentPost__select {
  align-items: center;
  background-color: var(--theme-surface);
  border: thin solid var(--color-black);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 1.6rem;
  position: relative;

  span {
    font: var(--type-body-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
  }

  select {
    appearance: none;
    background-color: transparent;
    border: none;
    flex: 1;
    font: var(--type-body-xs);
    left: 0;
    padding: 1.6rem;
    position: absolute;
    opacity: 0;
    top: 0;
    width: 100%;
    option: {
      font: var(--type-body-xs);
    }
  }
}
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220409/9e3f3484/attachment.htm>