diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 4b4ed093..9d3c1b99 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -339,7 +339,8 @@ const input = {
       xl: 'h-6 w-6'
     },
     leading: {
-      wrapper: 'absolute inset-y-0 left-0 flex items-center pointer-events-none',
+      wrapper: 'absolute inset-y-0 left-0 flex items-center',
+      pointer: 'pointer-events-none',
       padding: {
         '2xs': 'pl-2',
         xs: 'pl-2.5',
@@ -350,7 +351,8 @@ const input = {
       }
     },
     trailing: {
-      wrapper: 'absolute inset-y-0 right-0 flex items-center pointer-events-none',
+      wrapper: 'absolute inset-y-0 right-0 flex items-center',
+      pointer: 'pointer-events-none',
       padding: {
         '2xs': 'pr-2',
         xs: 'pr-2.5',
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index ff950348..8c3ae245 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -19,17 +19,17 @@
     >
     <slot />
 
-    <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
       <slot name="leading" :disabled="disabled" :loading="loading">
         <UIcon :name="leadingIconName" :class="leadingIconClass" />
       </slot>
-    </div>
+    </span>
 
-    <div v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
       <slot name="trailing" :disabled="disabled" :loading="loading">
         <UIcon :name="trailingIconName" :class="trailingIconClass" />
       </slot>
-    </div>
+    </span>
   </div>
 </template>
 
@@ -220,8 +220,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.padding[props.size],
-        slots.leading && '!pointer-events-auto'
+        ui.value.icon.leading.pointer,
+        ui.value.icon.leading.padding[props.size]
       )
     })
 
@@ -237,8 +237,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.padding[props.size],
-        slots.trailing && '!pointer-events-auto'
+        ui.value.icon.trailing.pointer,
+        ui.value.icon.trailing.padding[props.size]
       )
     })
 
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index c3612472..b3e1bb31 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -36,11 +36,11 @@
       </template>
     </select>
 
-    <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
       <slot name="leading" :disabled="disabled" :loading="loading">
         <UIcon :name="leadingIconName" :class="leadingIconClass" />
       </slot>
-    </div>
+    </span>
 
     <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
       <slot name="trailing" :disabled="disabled" :loading="loading">
@@ -267,8 +267,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.padding[props.size],
-        slots.leading && '!pointer-events-auto'
+        ui.value.icon.leading.pointer,
+        ui.value.icon.leading.padding[props.size]
       )
     })
 
@@ -284,8 +284,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.padding[props.size],
-        slots.trailing && '!pointer-events-auto'
+        ui.value.icon.trailing.pointer,
+        ui.value.icon.trailing.padding[props.size]
       )
     })
 
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index a6893b1e..bd47e951 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -332,8 +332,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.leading.wrapper,
-        uiSelect.value.icon.leading.padding[props.size],
-        slots.leading && '!pointer-events-auto'
+        uiSelect.value.icon.leading.pointer,
+        uiSelect.value.icon.leading.padding[props.size]
       )
     })
 
@@ -349,8 +349,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.trailing.wrapper,
-        uiSelect.value.icon.trailing.padding[props.size],
-        slots.trailing && '!pointer-events-auto'
+        uiSelect.value.icon.trailing.pointer,
+        uiSelect.value.icon.trailing.padding[props.size]
       )
     })