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

Question

  <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 ??

Answer 1

.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 上的类名即可。