From 434cfa56cc49ba1e9ae4434a5427bf7a6f3b8118 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Sun, 15 Dec 2024 09:59:05 +0400
Subject: [PATCH] Set the background color on `<option>` to fix readability
 issue

---
 frontend/src/components/VSelectField/VSelectField.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue
index dd00333154d..93202b1cd10 100644
--- a/frontend/src/components/VSelectField/VSelectField.vue
+++ b/frontend/src/components/VSelectField/VSelectField.vue
@@ -104,10 +104,13 @@ const splitAttrs = computed(() => {
       v-bind="splitAttrs.nonClassAttrs"
       :aria-label="labelText"
     >
-      <option v-if="blankText" disabled value="">{{ blankText }}</option>
+      <option v-if="blankText" class="bg-overlay" disabled value="">
+        {{ blankText }}
+      </option>
       <option
         v-for="choice in choices"
         :key="choice.key"
+        class="bg-overlay"
         :value="choice.key"
         :selected="choice.key === selectValue ? true : undefined"
       >