From d979b1c7b5049e2883c987f8e4cf4d19e7394d78 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <hi@dhruvkb.dev>
Date: Mon, 16 Dec 2024 12:51:50 +0400
Subject: [PATCH] Set the background color on `<option>` to fix readability
 issue (#5278)

---
 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"
       >