Vaadin Flow TextField:如何动态改变字体颜色？
Vaadin Flow TextField:如何动态改变字体颜色？
提问于 2019-01-26 05:24:30
我想要动态更改Vaadin Flow TextField组件的字体颜色。
尝试过此操作，但不起作用：
textField.getElement().setProperty("color", "red");我怀疑这是因为<input>元素隐藏在卷影dom中。我不知道该怎么处理这件事。
顺便说一句，我知道Dynamic Styling tutorial。
回答 2
Stack Overflow用户
发布于 2020-06-14 00:58:28
如果你不关心输入字段上面的标签的文本颜色也变成了红色，你也可以结合使用(在当前的Firefox和Chromium中使用Vaadin 14.2.1进行测试)：
textField.getElement().getStyle().set("color", "red");
textField.getElement().getStyle().set("-webkit-text-fill-color", "red");Stack Overflow用户
发布于 2021-12-18 19:41:28
使用Custom Theme feature，您可以添加自定义主题@Theme(value = "my-theme")，创建一个CSS样式表文件${project.basedir}/frontend/themes/my-theme/components/vaadin-text-field.css，并在其中放置以下内容：
:host(.my-class-red) [part="input-field"]{
color:red
}
:host(.my-class-blue) [part="input-field"]{
color:blue
}在Java方面：
TextField name = new TextField("Your name");
name.setLabel("My label");
Button red = new Button("Red", click -> {
name.removeClassName("my-class-blue");
name.addClassName("my-class-red");
});
Button blue = new Button("Blue", click -> {
name.removeClassName("my-class-red");
name.addClassName("my-class-blue");
});
Button reset = new Button("Reset", click -> {
name.removeClassNames("my-class-red", "my-class-blue");
});
add(red, blue, reset);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54372971
复制相关文章
相似问题
腾讯云开发者
