Hey there! I'm currently working on styling a basic input, and I'm having trouble getting the unfocus animation to work properly.
Can anyone help me figure out what's going wrong?
I've tried commenting out the all: unset line and explicitly setting outline: transparent to see if that would solve the issue, but unfortunately it didn't work as expected.
Any suggestions or tips would be greatly appreciated!
Cheers!
For reference, here is the link to my Codesandbox: https://codesandbox.io/s/custom-input-yo98mc?file=/src/components/CInput.vue
CInput Component:
<template>
<input class="c-input" :value="value" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
value: { type: String, default: '' },
color: { type: String, default: '#AB92F0' },
}
,
setup(){
}
})
</script>
<style lang="sass">
.c-input
// all: unset
border: none
outline: none
display: flex
min-width: 200px
width: 100%
font-size: 36px
padding: 14px
border-radius: 6px
background-color: white
transition: all 300ms ease-in-out
&:focus
outline: 4px solid red
</style>