[Vuejs]-Is there a way to create a "rounded" vuetify outlined text-field in vuetify@3 with vite setup?

by

0👍

Border of outlined v-text-field is set up on two elements .v-field__outline__start, .v-field__outline__end. The first one has too small width for being rounded with big radius, so my solution for setting rounded border is:

  1. Remove border from this two elements
  2. Set necessary border and border-radius (in my case it was necessary to reproduce rounded-pill behavior) on parent element which is .v-field__outline
    In my case I use scss, so component I added below code into component styles
<style scoped lang="scss">
:deep(.v-field__outline) {
  border: 1px solid #F6FDEB;
  border-radius: 999px !important;

  .v-field__outline__start,
  .v-field__outline__end {
    border: none !important;
  }
}
</style>

The final result is on the image

Leave a comment