From fbcd0128d24597f97d286a550c7eb0f192f13e0e Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Tue, 30 Jan 2024 16:28:28 +0100
Subject: [PATCH] #824 Make select box consistent across browsers

---
 .../src/components/forms/BasicSelect.tsx             | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/browser/data-browser/src/components/forms/BasicSelect.tsx b/browser/data-browser/src/components/forms/BasicSelect.tsx
index 012b2ce4..b82fcddf 100644
--- 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;