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

【问题标题】：How to change outline color v-text-field vuetify.js如何更改轮廓颜色 v-text-field vuetify.js
【发布时间】：2020-10-05 17:17:24
【问题描述】：

有人知道如何更改 v-text-field 组件的轮廓颜色吗？ Click for the image

【问题讨论】：

这应该是边界。 border-color: red;.
问题是由于某种原因在 v-text-field 上不起作用
这能回答你的问题吗？ Vuetify set outlined for all v-text-field by default

标签： javascript vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：

或者你可以使用 ::v-deep 作为深度选择器而不是 >>>

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

.v-application .transparent {  
     border-color: black !important;
}

试试这个。

【讨论】：

【解决方案4】：

您需要在 Styles 部分创建一个与 CSS 样式相关的文件，并将其命名为 Override。在该文件中，您可以进行所需的任何更改。将以下代码放入该文件中，您可以更改边框的颜色：

.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
    > .v-input__control
    > .v-input__slot
    fieldset {
    color: rgba(169, 169, 169, 0.33);
  }

【讨论】：

【解决方案5】：

如果您使用的是 SASS 变量，请像这样自定义灯光主题：

// Your custom main.scss

$material-light: (
  'text-fields': (
    'outlined': rgba(0,0,0, 0.19),
  ),
);

你可以像这样覆盖@vuetify/src/styles/settings/_light.scss中的所有变量。

【讨论】：