Question

我有一个v-text-field，我试图将高度设置为37px，但似乎最小高度必须为49px。有没有办法覆盖这个？我尝试放置自定义CSS，但似乎可以在chrome检查器中使用，但我无法以某种方式定位它

我制作了一个应用自定义CSS样式的codepen，但似乎无法正常工作：https://codepen.io/anon/pen/MMEmex

 <div id="app">
  <v-app id="inspire">
   <v-container>
   <v-text-field solo placeholder="trying to adjust the height" 
   height="37px"></v-text-field>
   </v-container>
  </v-app>
  </div>

   new Vue({
 el: '#app'
    })

当我在Chrome检查器工具的.v-input-slot上应用此CSS时，它似乎可以工作

  .v-input__slot {
  min-height: auto !important;
 display: flex !important;
 align-items: center !important;
 }

谢谢你。

Answer 1

使用密集

<v-text-field dense></v-text-field>

Answer 2

您的CSS选择器应为：

 .v-text-field .v-input__control .v-input__slot {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

在codepen上的演示

Answer 3

这是基于 ittus's 答案，但它也会相应地缩小文本字段标签、图标和详细信息。

.v-text-field .v-input__control .v-input__slot {
  min-height: 0 !important;
  padding: 0 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.v-text-field .v-input__control .v-input__slot .v-input__append-inner {
  margin-top: 5px !important;
}

.v-text-field .v-input__control .v-input__slot label {
  margin-top: -12px !important;
}

.v-text-field .v-input__control .v-input__slot label.v-label--active {
  margin: 0 0 0 5px !important;
}

.v-text-field__details {
  margin: 2px !important;
}

验证v文本字段的最小高度限制？

3 个答案: