如何删除或覆盖vuetify的v-textarea底部边框?

bnlyeluc  于 2023-06-24  发布在  Vue.js
关注(0)|答案(2)|浏览(201)

我试图摆脱Vuetify的默认下划线在v-textarea没有使用单位和独奏。这是我的代码:

<v-textarea
      v-model="card.todo"
      placeholder="New item"
      class="text-area"
      auto-grow
      rows="1"
      row-height="10"
      @keyup="update_card"
    ></v-textarea>

这是它如何呈现的:

<div class="v-input__slot"><div class="v-text-field__slot"><textarea id="input-105" placeholder="New item" rows="1" style="height: 84px;"></textarea></div></div>

我相信这与class=“v-input__slot”有关,因为当我删除该行时,下划线就消失了。

lrpiutwd

lrpiutwd1#

试试这个:

.v-input.v-textarea>.v-input__control>.v-input__slot:before {
    border: none;
}

只是要注意,这将清除所有v-textarea的边界,所以如果你不想要的话,使用一个类或id!

0sgqnhkj

0sgqnhkj2#

添加attr(variant ='solo-filled')到textarea标签
<v-textarea variant='solo-filled'></v-textarea>
您可以在这里找到更多信息https://vuetifyjs.com/en/components/textareas/

相关问题