diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index f15e34173..4309e4985 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -29,19 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @use "ts/sass/button_mixins" as button;
 
     select {
-        display: inline-block;
-        vertical-align: middle;
-
         height: var(--toolbar-size);
-        width: auto;
-
-        user-select: none;
-        box-shadow: none;
-        border-radius: 0;
-
-        &:focus {
-            outline: none;
-        }
     }
 
     @include button.btn-day($with-hover: false);
@@ -55,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     disabled={_disabled}
     {id}
-    class={className}
+    class="{className} form-select"
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     title={tooltip}
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index 79bdada4b..e8a1dd920 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/ts/deckoptions/deckoptions-base.scss
@@ -48,3 +48,8 @@ html {
 code {
     color: var(--flag1-bg);
 }
+
+// override the default down arrow colour in <select> elements
+.night-mode select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
+}