css 如何在vuetify v-select中删除下划线

nfs0ujit 于 2023-04-08 发布在其他

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

我有一个v-select的组件，例如

<v-container>
    <v-row>
      <v-col>
        <v-select
          class="no-border"
          variant="underlined"
          label="Select"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        ></v-select>
      </v-col>
    </v-row>
  </v-container>

我试着用css来删除

.v-input--underlined .v-input__control {
  border: none !important;
  box-shadow: none !important;
}

css

来源：https://stackoverflow.com/questions/75958563/how-to-remove-underlined-in-vuetify-v-select

2条答案

按热度按时间

clj7thdc1#

我假设你的意思是选择底部的细黑边框。
在Vuetify 2中，你必须覆盖.v-input__slot::before：

.theme--light.v-text-field.no-border > .v-input__control > .v-input__slot::before{
  border-width: 0;
}

在Vuetify 3中，你必须覆盖.v-field__outline::before：

.no-border .v-field--variant-underlined .v-field__outline::before{
  border-width: 0;
}

赞(0）回复(0）举报 2023-04-08

cwtwac6a2#

尝试添加自定义类到v-select组件

<v-select
  class="no-border no-underline"
  variant="underlined"
  label="Select"
  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-select>

    .no-underline .v-select__selections {
  border-bottom: none !important;
  box-shadow: none !important;
}

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何在vuetify v-select中删除下划线

2条答案

相关问题

热门标签

最新问答