diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index d925245..6e8a900 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    id="selector-dropdown"
-    class="flex flex-col"
+    class="selector-dropdown | flex flex-col"
     :style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'"
   >
     <label for="selector-select" class="text-sm">{{ label }}</label>
@@ -176,7 +175,7 @@ function getFrontViewUrl(item) {
 </script>
 
 <style>
-#selector-dropdown {
+.selector-dropdown {
   --selector-width: 21rem;
   --row-gap: 0;
   align-items: flex-start;
@@ -187,7 +186,7 @@ function getFrontViewUrl(item) {
   min-width: var(--selector-width, 21rem);
   padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
 }
-#selector-dropdown::before {
+.selector-dropdown::before {
   content: '';
   position: absolute;
   left: var(--space-8);
@@ -237,7 +236,7 @@ function getFrontViewUrl(item) {
 [data-pc-section="dropdown"] {
   display: none; /* Hide default component svg */
 }
-#selector-dropdown [data-icon]::before {
+.selector-dropdown [data-icon]::before {
   --icon-color: var(--color-grey-700);
   position: absolute;
   right: var(--space-8);
@@ -246,7 +245,7 @@ function getFrontViewUrl(item) {
   height: 2.5rem;
   padding: 0.625rem;
 }
-#selector-dropdown label {
+.selector-dropdown label {
   color: var(--color-grey-700);
   letter-spacing: var(--tracking-wider);
   overflow: hidden;