Bug 239033

Created attachment 457170 [details]
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);
    }
  }
}
```