Firefox bug - fix contrast of <select> options in dark mode (#1981)

* reverts select options colors to initial * adds changeset * rm unnecessary option style
primer · Mar 17, 2022 · e9bb595 · e9bb595
1 parent 3b23604
commit e9bb595
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/.changeset/healthy-cooks-draw.md b/.changeset/healthy-cooks-draw.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensures select option text has acceptable contrast in Firefox when in dark mode
diff --git a/src/Select.tsx b/src/Select.tsx
@@ -16,15 +16,14 @@ const StyledSelect = styled.select`
   outline: none;
   width: 100%;
 
+  option {
+    color: initial;
+  }
+
   /* colors the select input's placeholder text */
   &:invalid {
     color: ${get('colors.fg.subtle')};
   }
-
-  /* For Firefox: reverts color of non-placeholder options in the dropdown */
-  &:invalid option:not(:first-child) {
-    color: ${get('colors.fg.default')};
-  }
 `
 
 const ArrowIndicatorSVG: React.FC<{className?: string}> = ({className}) => (