vuetify v-select：样式化,去掉下划线，自定义占位符

yftpprvb 于 2023-06-24 发布在 Vue.js

关注(0)|答案(2)|浏览(199)

<v-col>
                    <v-select
                    class="custom" 
                      multiple
                      attach
                      chips
                      dense
                      :placeholder="header.text"
                      clearable
                      :items="columnValueList(header.value)"
                      v-model="filter[header.value]"
                    >[enter image description here][1]
                    </v-select>
                  </v-col>

I want to get rid of that underline and only show the dropdown icon. I looks so messy, when i click on item, the underline gets filled and the design loks messy. Anything I can do ??

vue.js

来源：https://stackoverflow.com/questions/68615826/vuetify-v-select-styling-get-rid-of-the-underline-and-customize-the-placeholde

2条答案

按热度按时间

xnifntxz1#

1.将v-select设置为outlined
1.在样式部分做这个

.custom >>> fieldset {
  border-style: none;
}

赞(0）回复(0）举报 2023-06-24

pgx2nnw82#

.select_class_name.v-text-field>.v-input__control>.v-input__slot:before { 
     border-style: none; 
} 
.select_class_name.v-text-field>.v-input__control>.v-input__slot:after { 
     border-style: none; 
}

只需将类名替换为v-select上的类名即可。

赞(0）回复(0）举报 2023-06-24

我来回答

vuetify v-select：样式化,去掉下划线，自定义占位符

2条答案

相关问题

热门标签

最新问答