#824 Make select box consistent across browsers

atomicdata-dev · Jan 30, 2024 · fbcd012 · fbcd012
1 parent b47684f
commit fbcd012
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/browser/data-browser/src/components/forms/BasicSelect.tsx b/browser/data-browser/src/components/forms/BasicSelect.tsx
@@ -26,10 +26,22 @@ const SelectWrapper = styled.span<{ disabled: boolean }>`
   padding-inline: 0.2rem;
   background-color: ${p =>
     p.disabled ? p.theme.colors.bg1 : p.theme.colors.bg};
+
+  // Because we remove the appearance of the select for compatibility reasons, we have to add back the chevron.
+  position: relative;
+  &:after {
+    content: '▾';
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    pointer-events: none;
+    color: ${p => p.theme.colors.textLight};
+  }
 `;
 
 const Select = styled.select`
   cursor: pointer;
+  appearance: none;
   width: 100%;
   border: none;
   outline: none;