Fix language select styling

ooni · Apr 25, 2024 · a61701c · a61701c
1 parent 3011499
commit a61701c
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/components/NavBar.js b/components/NavBar.js
@@ -27,25 +27,30 @@ const StyledNavItem = styled(NLink)`
 `
 
 const LanguageSelect = styled.select`
-  color: ${(props) => props.theme.colors.white};
-  background: none;
-  opacity: 0.6;
-  border: none;
-  text-transform: capitalize;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  padding: 0;
-  padding-bottom: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  -o-appearance: none;
-  &:hover {
-    opacity: 1;
-  }
+color: ${(props) => props.theme.colors.white};
+background: none;
+opacity: 0.6;
+border: none;
+text-transform: capitalize;
+cursor: pointer;
+font-family: inherit;
+font-size: inherit;
+padding: 0;
+padding-bottom: 6px;
+outline: none;
+appearance: none;
+-webkit-appearance: none;
+-moz-appearance: none;
+-ms-appearance: none;
+-o-appearance: none;
+&:hover {
+  opacity: 1;
+}
+// reset option styling for browsers that apply it to its native styling (Brave)
+> option {
+  color: initial;
+  opacity: initial;
+}
 `
 
 const NavItem = ({ label, href }) => {