如何解决Vaadin 更改文本字段标签颜色
我正在寻找一种简单的方法来更改 Vaadin TextField 组件的标签颜色。 当 Textfield 处于焦点时,它会自动变为蓝色,但我需要将其更改为另一种颜色。 首先,我尝试在 css 文件中像这样更改它:
color: <anycolor>;
但这只是改变了输入文本的颜色。有没有办法只改变标签的颜色?我正在使用 Vaadin 14。
解决方法
如果您在浏览器 DevTools(F12 或 Ctrl+Shift+C)中检查应用于 <label>
标记的 CSS,您会看到它是
:host([focused]:not([readonly])) [part="label"] {
color: var(--lumo-primary-text-color);
}
有 2 个选项可以自定义:
-
更改变量。 您可以编写
--lumo-primary-text-color: green;
以在您的全局 CSS 中设置该变量的值。多个选项:- 在那个特定的 textField
textField.getStyle().set("--lumo-primary-text-color","green")
上,或 - 将其应用于具有类
textField.addClassName("green-text")
的字段
,或green-text { --lumo-primary-text-color: green; }
- 将其应用于所有文本字段:
vaadin-text-field { --lumo-primary-text-color: green; }
- 在那个特定的 textField
-
使用更具体的规则重载 CSS。您需要将其添加到
vaadin-text-field
的 shadow DOM 使用@CssImport(value = "./styles/path/yout-vaadin-text-field.css",themeFor = "vaadin-text-field")
:host(.green-text[focused]:not([readonly])) [part="label"] { color: green; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。