diff --git a/packages/components/select-v2/src/select.types.ts b/packages/components/select-v2/src/select.types.ts
index 01cad26318..553e35cb66 100644
--- a/packages/components/select-v2/src/select.types.ts
+++ b/packages/components/select-v2/src/select.types.ts
@@ -20,7 +20,6 @@ export type SelectStates = {
   hoveringIndex: number
   inputHovering: boolean
   selectionWidth: number
-  calculatorWidth: number
   collapseItemWidth: number
   previousQuery: string | null
   previousValue: unknown
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index ab8ce11815..1d81b7aa85 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -283,6 +283,7 @@ import { ClickOutside } from '@element-plus/directives'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElTag from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
+import { useCalcInputWidth } from '@element-plus/hooks'
 import ElSelectMenu from './select-dropdown'
 import useSelect from './useSelect'
 import { SelectProps, selectEmits } from './defaults'
@@ -318,6 +319,8 @@ export default defineComponent({
       }),
       emit
     )
+    const { calculatorRef, inputStyle } = useCalcInputWidth()
+
     provide(selectV2InjectionKey, {
       props: reactive({
         ...toRefs(props),
@@ -343,6 +346,8 @@ export default defineComponent({
       ...API,
       modelValue,
       selectedLabel,
+      calculatorRef,
+      inputStyle,
     }
   },
 })
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 49161b3301..0ab692f25d 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -52,8 +52,6 @@ import type { TooltipInstance } from '@element-plus/components/tooltip'
 import type { SelectDropdownInstance } from './select-dropdown'
 import type { Component, ComputedRef, Ref, WritableComputedRef } from 'vue'
 
-const MINIMUM_INPUT_WIDTH = 11
-
 type useSelectReturnType = (
   props: ISelectV2Props,
   emit: SelectEmitFn
@@ -71,7 +69,6 @@ type useSelectReturnType = (
   iconReverse: ComputedRef<any>
   tagStyle: ComputedRef<{ maxWidth: string }>
   collapseTagStyle: ComputedRef<{ maxWidth: string }>
-  inputStyle: ComputedRef<{ width: string }>
   popperSize: Ref<number>
   dropdownMenuVisible: WritableComputedRef<boolean>
   hasModelValue: ComputedRef<boolean>
@@ -84,7 +81,6 @@ type useSelectReturnType = (
   isFocused: Ref<boolean>
   nsSelect: ReturnType<typeof useNamespace>
   nsInput: ReturnType<typeof useNamespace>
-  calculatorRef: Ref<HTMLElement | undefined>
   inputRef: Ref<HTMLElement | undefined>
   menuRef: Ref<SelectDropdownInstance | undefined>
   tagMenuRef: Ref<HTMLElement | undefined>
@@ -116,7 +112,6 @@ type useSelectReturnType = (
   handleMenuEnter: () => void
   handleResize: () => void
   resetSelectionWidth: () => void
-  resetCalculatorWidth: () => void
   updateTooltip: () => void
   updateTagTooltip: () => void
   updateOptions: () => void
@@ -158,7 +153,6 @@ const useSelect: useSelectReturnType = (
     hoveringIndex: -1,
     inputHovering: false,
     selectionWidth: 0,
-    calculatorWidth: 0,
     collapseItemWidth: 0,
     previousQuery: null,
     previousValue: undefined,
@@ -176,7 +170,6 @@ const useSelect: useSelectReturnType = (
   const tooltipRef = ref<TooltipInstance>()
   const tagTooltipRef = ref<TooltipInstance>()
   const inputRef = ref<HTMLElement>()
-  const calculatorRef = ref<HTMLElement>()
   const prefixRef = ref<HTMLElement>()
   const suffixRef = ref<HTMLElement>()
   const menuRef = ref<SelectDropdownInstance>()
@@ -410,10 +403,6 @@ const useSelect: useSelectReturnType = (
     return { maxWidth: `${states.selectionWidth}px` }
   })
 
-  const inputStyle = computed(() => ({
-    width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`,
-  }))
-
   const shouldShowPlaceholder = computed(() => {
     if (isArray(props.modelValue)) {
       return props.modelValue.length === 0 && !states.inputValue
@@ -603,10 +592,6 @@ const useSelect: useSelectReturnType = (
     states.selectionWidth = selectionRef.value!.getBoundingClientRect().width
   }
 
-  const resetCalculatorWidth = () => {
-    states.calculatorWidth = calculatorRef.value!.getBoundingClientRect().width
-  }
-
   const resetCollapseItemWidth = () => {
     states.collapseItemWidth =
       collapseItemRef.value!.getBoundingClientRect().width
@@ -1019,7 +1004,6 @@ const useSelect: useSelectReturnType = (
   })
   useResizeObserver(selectRef, handleResize)
   useResizeObserver(selectionRef, resetSelectionWidth)
-  useResizeObserver(calculatorRef, resetCalculatorWidth)
   useResizeObserver(menuRef, updateTooltip)
   useResizeObserver(wrapperRef, updateTooltip)
   useResizeObserver(tagMenuRef, updateTagTooltip)
@@ -1040,7 +1024,6 @@ const useSelect: useSelectReturnType = (
     iconReverse,
     tagStyle,
     collapseTagStyle,
-    inputStyle,
     popperSize,
     dropdownMenuVisible,
     hasModelValue,
@@ -1055,7 +1038,6 @@ const useSelect: useSelectReturnType = (
     nsInput,
 
     // refs items exports
-    calculatorRef,
     inputRef,
     menuRef,
     tagMenuRef,
@@ -1091,7 +1073,6 @@ const useSelect: useSelectReturnType = (
     handleMenuEnter,
     handleResize,
     resetSelectionWidth,
-    resetCalculatorWidth,
     updateTooltip,
     updateTagTooltip,
     updateOptions,
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index f480ebe4c0..e4096c5898 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -303,6 +303,7 @@ import ElTag from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { isArray } from '@element-plus/utils'
+import { useCalcInputWidth } from '@element-plus/hooks'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import { useSelect } from './useSelect'
@@ -356,6 +357,7 @@ export default defineComponent({
     })
 
     const API = useSelect(_props, emit)
+    const { calculatorRef, inputStyle } = useCalcInputWidth()
 
     provide(
       selectKey,
@@ -382,6 +384,8 @@ export default defineComponent({
       ...API,
       modelValue,
       selectedLabel,
+      calculatorRef,
+      inputStyle,
     }
   },
 })
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 7ae18c22a3..e960c040a2 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -51,8 +51,6 @@ import {
 import type ElTooltip from '@element-plus/components/tooltip'
 import type { ISelectProps, SelectOptionProxy } from './token'
 
-const MINIMUM_INPUT_WIDTH = 11
-
 type useSelectType = (
   props: ISelectProps,
   emit: any
@@ -147,7 +145,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
     optionValues: [] as any[], // sorted value of options
     selected: [] as any[],
     selectionWidth: 0,
-    calculatorWidth: 0,
     collapseItemWidth: 0,
     selectedLabel: '',
     hoveringIndex: -1,
@@ -163,7 +160,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
   const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
   const tagTooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
   const inputRef = ref<HTMLInputElement | null>(null)
-  const calculatorRef = ref<HTMLElement>(null)
   const prefixRef = ref<HTMLElement>(null)
   const suffixRef = ref<HTMLElement>(null)
   const menuRef = ref<HTMLElement>(null)
@@ -540,10 +536,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
     states.selectionWidth = selectionRef.value.getBoundingClientRect().width
   }
 
-  const resetCalculatorWidth = () => {
-    states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
-  }
-
   const resetCollapseItemWidth = () => {
     states.collapseItemWidth =
       collapseItemRef.value.getBoundingClientRect().width
@@ -858,12 +850,7 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
     return { maxWidth: `${states.selectionWidth}px` }
   })
 
-  const inputStyle = computed(() => ({
-    width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`,
-  }))
-
   useResizeObserver(selectionRef, resetSelectionWidth)
-  useResizeObserver(calculatorRef, resetCalculatorWidth)
   useResizeObserver(menuRef, updateTooltip)
   useResizeObserver(wrapperRef, updateTooltip)
   useResizeObserver(tagMenuRef, updateTagTooltip)
@@ -885,7 +872,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
     hoverOption,
     selectSize,
     filteredOptionsCount,
-    resetCalculatorWidth,
     updateTooltip,
     updateTagTooltip,
     debouncedOnInputChange,
@@ -933,14 +919,12 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
     // computed style
     tagStyle,
     collapseTagStyle,
-    inputStyle,
 
     // DOM ref
     popperRef,
     inputRef,
     tooltipRef,
     tagTooltipRef,
-    calculatorRef,
     prefixRef,
     suffixRef,
     selectRef,
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index 4463f452ef..91a2cddebc 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -159,6 +159,7 @@
 
   @include e(placeholder) {
     position: absolute;
+    z-index: -1;
     display: block;
     top: 50%;
     transform: translateY(-50%);
@@ -184,7 +185,7 @@
   }
 
   @include e(input-wrapper) {
-    max-width: 100%;
+    flex: 1;
 
     @include when(hidden) {
       // Out of the document flow
@@ -202,7 +203,7 @@
     font-family: inherit;
     appearance: none;
     height: map.get($select-item-height, 'default');
-    max-width: 100%;
+    width: 100%;
     background-color: transparent;
 
     @include when(disabled) {