Estoy tratando de hacer un componente de Select personalizado con un "marcador de posición" flotante. Quiero hacer que el "marcador de posición" suba un poco cuando se muestre el menú desplegable con opciones.

¿Alguna idea de cómo hacer algo como esto? "Nombre" es un "marcador de posición" que es predeterminado, cuando no elegimos ninguna opción del menú desplegable. Después de elegir algo, debería subir.

Select componente:

 <template> <div tabindex="0" class="relative w-full h-[30px] w-[160px] text-left" @blur="open = false" > <div class="h-[30px] w-full border-b border-gray bg-transparent cursor-pointer flex items-center justify-between" :class="{ 'pointer-events-none border-gray-cool text-gray-cool': disabled }" @click="open = !open" > {{ selected ? selected : placeholder }} </div> <div class="absolute left-0 right-0 z-10 overflow-hidden bg-white" :class="{ 'hidden': !open }" > <div v-for="(option, index) of options" :key="index" class="cursor-pointer border-b border-gray text-gray" @click="handleClick(option)" v-text="option" /> </div> </div> </template> <script lang="ts" setup> import { ref } from '@vue/reactivity' interface Props { options: string[], disabled?: boolean, placeholder?: string, } const props = withDefaults(defineProps<Props>(), { options: [] as any, disabled: false, placeholder: 'Select...', }) const emit = defineEmits(['input']) const selected = ref() const open = ref(false) const handleClick = (option: string) => { selected.value = option open.value = false emit('input', option) } </script>