Vuetifyのv-textareaから枠線とオーバーレイを除く
Vuetify vtextarea solo CSS This article explains how to remove borderlines and overlays from vtextareas in Vuetify. To do this, use the solo attribute and set the CSS in the article.
by JanitorAug 20, 2023
Vuetifyのv-textareaから枠線とオーバーレイを除く方法です。Nuxtの入力ルールはそのまま使いたいけど、アクティブになったときのオーバレイや枠線が気になる方の参考になれば幸いです。
Vuetifyのv-textareaから枠線とオーバーレイを除く方法です。Nuxtの入力ルールはそのまま使いたいけど、アクティブになったときのオーバレイや枠線が気になる方の参考になれば幸いです。
Jump Links
1.v-textareaを「solo」で作成
2.cssの設定
1.v-textareaを「solo」で作成
1.v-textareaを「solo」で作成
上の画像のAfterのv-textareaは下記の通りです。
上の画像のAfterのv-textareaは下記の通りです。
<label for="titleAF"
class="mb-3">
After
</label>
<div class="after" style="color: white;">
<v-textarea solo no-resize rows="2"
label="titleAF"
v-model="titleAF.value">
</v-textarea>
</div>
<label for="titleAF"
class="mb-3">
After
</label>
<div class="after" style="color: white;">
<v-textarea solo no-resize rows="2"
label="titleAF"
v-model="titleAF.value">
</v-textarea>
</div>
2.cssの設定
2.cssの設定
afterに設定したcssは下記の通りです。
afterに設定したcssは下記の通りです。
.after .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before{
border-style: none !important;
}
.after .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after{
border-style: none !important;
}
.after .v-field__overlay{
width: 0px !important;
}
.after .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before{
border-style: none !important;
}
.after .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after{
border-style: none !important;
}
.after .v-field__overlay{
width: 0px !important;
}
Vuetifyのv-textareaから枠線とオーバーレイを除く
Vuetify vtextarea solo CSS This article explains how to remove borderlines and overlays from vtextareas in Vuetify. To do this, use the solo attribute and set the CSS in the article.
by JanitorAug 20, 2023
Vuetifyのv-textareaから枠線とオーバーレイを除く方法です。Nuxtの入力ルールはそのまま使いたいけど、アクティブになったときのオーバレイや枠線が気になる方の参考になれば幸いです。
Vuetifyのv-textareaから枠線とオーバーレイを除く方法です。Nuxtの入力ルールはそのまま使いたいけど、アクティブになったときのオーバレイや枠線が気になる方の参考になれば幸いです。
Jump Links
1.v-textareaを「solo」で作成
2.cssの設定
1.v-textareaを「solo」で作成
1.v-textareaを「solo」で作成
上の画像のAfterのv-textareaは下記の通りです。
上の画像のAfterのv-textareaは下記の通りです。
<label for="titleAF"
class="mb-3">
After
</label>
<div class="after" style="color: white;">
<v-textarea solo no-resize rows="2"
label="titleAF"
v-model="titleAF.value">
</v-textarea>
</div>
<label for="titleAF"
class="mb-3">
After
</label>
<div class="after" style="color: white;">
<v-textarea solo no-resize rows="2"
label="titleAF"
v-model="titleAF.value">
</v-textarea>
</div>
2.cssの設定
2.cssの設定
afterに設定したcssは下記の通りです。
afterに設定したcssは下記の通りです。
.after .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before{
border-style: none !important;
}
.after .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after{
border-style: none !important;
}
.after .v-field__overlay{
width: 0px !important;
}
.after .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before{
border-style: none !important;
}
.after .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after{
border-style: none !important;
}
.after .v-field__overlay{
width: 0px !important;
}