'How can I overwrite the border color of a disabled input of Vuetify?
This is not a usual case, I would like to mention this upfront. I need to overwrite the border color of a diabled input filed of vuetify.
I tried
<v-text-field class="type-input" dense outlined v-model="type" label="Type" disabled></v-text-field>
Please check my fiddle
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<template id="mainbox">
<v-container>
<v-row>
<v-col cols="12">
<v-card outlined>
<div class="text-overline mb-4">
{{ title }}
</div>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- TEST CODE -->
<!-- --------- -->
<v-text-field class="type-input" dense outlined v-model="type" label="Change my border please" disabled></v-text-field>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- END TEST CODE -->
<!-- --------- -->
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<v-app id="app">
<!-- -------------------------------------------------------------------------- -->
<!-- TITLE -->
<!-- ----- -->
<mainbox title="$CODE_08" />
<!-- -------------------------------------------------------------------------- -->
</v-app>
<script type="text/javascript">
const mainbox = Vue.component('mainbox', {
template: '#mainbox',
props: {
title: String
},
data() {
return {
showAppBar: true,
alert: true,
alertColor: 'green',
alertMessage: 'Success Message Test .... !!!! '
}
},
methods: {
doSomething() {
this.showAppBar = !this.showAppBar
this.alert = true,
this.alertColor = 'green',
this.alertMessage = 'test'
}
}
});
new Vue({
el: "#app",
vuetify: new Vuetify(),
components: {
mainbox
}
});
</script>
<style scoped>
>>> .type-input {
border: blue 2px solid;
}
</style>I can't get it to work.
Solution 1:[1]
edit
as igor has mentioned below, you should use .type-input.v-input--is-disabled fieldset as your CSS selector to be most specific.
you need to win the "specifity war" in order to solve this. so if you'll use .v-text-field--outlined fieldset as you css selector, it should work.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<template id="mainbox">
<v-container>
<v-row>
<v-col cols="12">
<v-card outlined>
<div class="text-overline mb-4">
{{ title }}
</div>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- TEST CODE -->
<!-- --------- -->
<v-text-field class="type-input" dense outlined v-model="type" label="Change my border please" disabled></v-text-field>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- END TEST CODE -->
<!-- --------- -->
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<v-app id="app">
<!-- -------------------------------------------------------------------------- -->
<!-- TITLE -->
<!-- ----- -->
<mainbox title="$CODE_08" />
<!-- -------------------------------------------------------------------------- -->
</v-app>
<script type="text/javascript">
const mainbox = Vue.component('mainbox', {
template: '#mainbox',
props: {
title: String
},
data() {
return {
showAppBar: true,
alert: true,
alertColor: 'green',
alertMessage: 'Success Message Test .... !!!! '
}
},
methods: {
doSomething() {
this.showAppBar = !this.showAppBar
this.alert = true,
this.alertColor = 'green',
this.alertMessage = 'test'
}
}
});
new Vue({
el: "#app",
vuetify: new Vuetify(),
components: {
mainbox
}
});
</script>
<style scoped>
.v-text-field--outlined fieldset {
border: blue 2px solid;
}
</style>another solution would be to use !important on your class, but personally I dont believe it's an elegant solution
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |