【问题标题】:How to change Vuetify v-text-field outlined border如何更改 Vuetify v-text-field 轮廓边框
【发布时间】:2023-03-21 08:19:01
【问题描述】:

我一直在尝试覆盖 outlined v-text-field 的默认边框颜色。基本上我想要一个特定的颜色(不集中,集中,悬停)使用下面的代码笔:

https://codepen.io/hoiratnhieu/pen/GRpjEeb

<v-text-field
              label="Outlined"
              outlined
              dense
            ></v-text-field>

有人可以在这里提供一些急需的帮助吗?

谢谢。

【问题讨论】:

标签: css styles border vuetify.js textfield


【解决方案1】:

您可以尝试使用以下 CSS:

.v-text-field--outlined fieldset {
    color: red !important;
}

【讨论】:

    【解决方案2】:

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

    // Your custom main.scss
    
    $material-light: (
      'text-fields': (
        'outlined': rgba(0,0,0, 0.19),
        'outlined-hover': rgba(0,0,0, 0.38),
      ),
    );
    

    焦点颜色只是原色。你可以像这样覆盖@vuetify/src/styles/settings/_light.scss中的所有变量。

    【讨论】:

      猜你喜欢
      • 2020-10-05
      • 2021-05-24
      • 2021-10-27
      • 2023-01-27
      • 2021-08-19
      • 2018-07-14
      • 2021-06-17
      • 2019-11-10
      • 1970-01-01
      相关资源
      最近更新 更多