I recently use Vuetify to implement some UI designs. However, I found the default input component (such as v-text-field, v-select) are too large. I found that I can adjust the width of them, but for the height and font size, how can I change them?
Although you can use :style bindings, to get what you want you'll have to resort to CSS.
You can use !important to "force in" your styles, but there are alternatives that can make it work without it. See demo below.
new Vue({
el: '#app'
});#styled-input {
height: 40px;
font-size: 20pt;
}
.styled-input label[for] {
height: 40px;
font-size: 20pt;
}<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.js'></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row>
<v-flex>
<v-text-field name="input-1" label="Regular Input"></v-text-field>
<v-text-field name="input-1" label="Styled Input" id="styled-input" class="styled-input"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>