diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index cfd723b8b0..e413f481d3 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/app/views/admin/products_v3/_filters.html.haml
@@ -7,12 +7,12 @@
       = label_tag :producer_id, t('.producers.label')
       = select_tag :producer_id, options_for_select(producer_options, producer_id),
         include_blank: t('.all_producers'), class: "fullwidth",
-        data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_producers')}
+        data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_producers')}
   .categories
     = label_tag :category_id, t('.categories.label')
     = select_tag :category_id, options_for_select(category_options, category_id),
       include_blank: t('.all_categories'), class: "fullwidth",
-      data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_categories')}
+      data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_categories')}
   .submit
     .search-button
       = button_tag t(".search"), class: "secondary icon-search relaxed"
diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 74e6c19c6b..699b8f6531 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -1,9 +1,3 @@
-@mixin hide-input {
-  // Pretend there's no text input (it can't be hidden entirely, in order for tom-select to work)
-  cursor: pointer;
-  caret-color: transparent;
-}
-
 .ts-wrapper.single,
 .ts-wrapper.multi {
   min-height: 40px;
@@ -43,16 +37,20 @@
   }
 
   .ts-dropdown {
+    // Unstyled, we style the dropdown-content instead
+    margin: 0;
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .ts-dropdown-content {
     margin-top: 4px;
     color: $near-black;
+    background-color: $color-body-bg;
     @include border-radius($border-radius);
-    border: none;
     box-shadow: $shadow-dropdown;
 
-    .ts-dropdown-content {
-      padding: $border-radius 0;
-    }
-
     .option {
       padding: 8px;
       border-left: 3px solid transparent;
@@ -68,11 +66,31 @@
   }
 }
 
-.plugin-dropdown_input .dropdown-input {
-  border-color: $lighter-grey;
+.plugin-dropdown_input {
+  .ts-dropdown {
+    // Cover up the control with the input
+    top: 0;
+  }
 
-  &:focus {
-    border-color: $orient;
+  .dropdown-input-wrap::after {
+    position: absolute;
+    content: "\f077"; // chevron-up
+    font-family: FontAwesome;
+    border: none;
+    top: 0.7rem;
+    right: 0.7rem;
+    font-size: 13px;
+  }
+
+  .dropdown-input {
+    background-color: $color-body-bg;
+    border: 1px solid $lighter-grey;
+    box-shadow: none;
+    padding: 0.5rem 0.75rem;
+
+    &:focus {
+      border: 1px solid $orient;
+    }
   }
 }
 
@@ -82,10 +100,6 @@
   max-height: 40px;
   max-width: 100%;
 
-  &.has-items {
-    @include hide-input;
-  }
-
   .ts-control {
     padding: 0.5rem 0.75rem;
     padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
@@ -120,13 +134,12 @@
 
 // 'no-input' mode, like a native select (hide text input).
 .ts-wrapper.single.no-input {
-  &.input-active .ts-control {
-    @include hide-input;
-  }
-
   .ts-dropdown {
     position: absolute;
     top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
+  }
+
+  .ts-dropdown-content {
     margin-top: 0;
   }
 }