Fix VSelectField focus ring (#4939)

WordPress · Sep 17, 2024 · dce6089 · dce6089
1 parent 81edaaa
commit dce6089
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue
@@ -84,7 +84,7 @@ const splitAttrs = computed(() => {
     <select
       :id="fieldId"
       v-model="selectValue"
-      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] appearance-none truncate bg-tx pe-10"
+      class="outline-style-none flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] appearance-none truncate bg-tx pe-10"
       :class="[
         showSelected ? 'w-full' : 'w-0 max-w-0',
         hasStartContent ? 'ps-10' : 'ps-2',

diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
@@ -328,6 +328,11 @@
   input[type="search"]::-webkit-search-results-decoration {
     -webkit-appearance: none;
   }
+
+  /* Completely remove the outline; to be replaced with a different focus ring */
+  .outline-style-none {
+    outline-style: none;
+  }
 }
 /*
 Text styles from Figma, @see