JavaFX中MFXTextField的:focused伪类失效问题排查

我在JavaFX开发中使用MaterialFX库的MFXTextField组件，需求是输入框激活时改变floating-text的颜色。尝试用CSS的:focus和:focused伪类都无效，但:pressed伪类可以正常生效。

无效代码：

.mfx-text-field .floating-text{
    -fx-text-fill: black;
}

.mfx-text-field:focused .floating-text {
    -fx-text-fill: -primary-color;
}

可生效但不符合需求的代码：

.mfx-text-field .floating-text{
    -fx-text-fill: black;
}

.mfx-text-field:pressed .floating-text {
    -fx-text-fill: -primary-color;
}

请问为何:focused伪类无法生效？

原因 #

MaterialFX的MFXTextField组件内部结构和原生JavaFX TextField不同，焦点状态并不是直接挂载在.mfx-text-field根节点上，而是作用在其内部嵌套的实际输入控件（比如自定义的输入区域子节点）。因此直接给.mfx-text-field加:focused伪类，无法匹配到输入框激活的状态。

解决方案 #

根据MaterialFX的组件结构，有两种可行的调整方式：

方式1：使用:focused-within伪类

这个伪类会在节点或其子节点获得焦点时生效，正好适配MFXTextField的内部结构：

.mfx-text-field .floating-text {
    -fx-text-fill: black;
}

.mfx-text-field:focused-within .floating-text {
    -fx-text-fill: -primary-color;
}

方式2：使用:has伪类（JavaFX 17+支持）

如果你的项目使用JavaFX 17及以上版本，可以通过:has伪类精准匹配内部输入框获得焦点的情况（假设内部输入控件的类名是.mfx-text-field-input，可通过Scene Builder或组件源码确认）：

.mfx-text-field .floating-text {
    -fx-text-fill: black;
}

.mfx-text-field:has(.mfx-text-field-input:focused) .floating-text {
    -fx-text-fill: -primary-color;
}

内容的提问来源于stack exchange，提问作者dddryinside