如何更改轮廓颜色 v-text-field vuetify.js

Question

有人知道如何更改 v-text-field 组件的轮廓颜色吗？ 点击图片

原文由 Dennis Kuijs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用深度选择器覆盖默认样式。原始 css 位于 fieldset 元素上，因此您也需要将其作为目标。

 <style scoped>
.v-text-field--outlined >>> fieldset {
  border-color: rgba(192, 0, 250, 0.986);
}
</style>

原文由 Cray 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 color attribute 如下所示：

 <v-text-field
   label="Your landing page"
    hint="www.example.com/page"
    persistent-hint
    outlined
    color="red"
></v-text-field>

原文由 habib.Ur.Rehman 发布，翻译遵循 CC BY-SA 4.0 许可协议