更改 TextField 焦点上的标题答案

【问题标题】：Change caption on TextField focus更改 TextField 焦点上的标题
【发布时间】：2016-06-28 13:57:40
【问题描述】：

在我的 Vaadin 应用程序中，我想更改焦点文本字段的颜色，这没问题。另外，我想更改属于 TextField 的标题的颜色。如何使用 css 实现这一点？

.v-textfield.textfield-default {
    border: none;
    border-bottom: 1px solid $non-active-field;
    outline: none;
    height: 3rem;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
  }

  .v-textfield.textfield-default:focus {
    border-bottom: 1px solid $default;
  }

  .v-caption-default-caption {
    color: purple; //changes the text to purple
    top: 0.8rem;
    left: 0.75rem;
    font-size: 1rem;
    cursor: text;
    transition: .2s ease-out;
  }

  .v-caption-default-caption:focus {
    color: red; //is never called
  }

  .v-caption-default-caption:active {
    color: blue; //is never called either
  }

【问题讨论】：

你能发布你的 HTML 吗？
我的 HTML 是什么意思？这是一个 Java Vaadin 应用程序
如果我是正确的，你不能在 CSS3 中拥有父选择器，但它们将在 CSS4 中可用。你应该在聚焦时触发一些事件，这会将一个类添加到标题中，并删除该类如果您模糊文本字段，则来自标题
查看这个例子stackoverflow.com/questions/36400631/…

标签： css vaadin

【解决方案1】：

注意：我不是 CSS/SCSS 专家，因此可能存在我不知道的更优雅的解决方案。我能想到的唯一一个是基于 Vaadin（也是 java 8）的，但非常欢迎更正和建议。

根据我收集到的信息，这种情况下的问题是您需要更新获得焦点的输入的前一个兄弟，也就是标题。我做了一些研究和so far it does not seem possible with CSS。

同时查看 DOM（见下图），只有文本字段被聚焦，因此您为标题定义的样式都不会被应用。在这种情况下，您可以使用的一种快速解决方法是向您的文本字段添加焦点和模糊侦听器，这将添加和删除您还将定义的自定义样式。

第 1 步：组件

public class MyTextFieldsComponent extends VerticalLayout {

    public MyTextFieldsComponent() {
        // the text-fields
        TextField myFirstField = new TextField("My first caption");
        TextField mySecondField = new TextField("My second caption");

        // when focused, add our custom style
        FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");

        // when blurred, remove the custom style
        FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");

        // use the above listeners
        myFirstField.addFocusListener(focusListener);
        mySecondField.addFocusListener(focusListener);
        myFirstField.addBlurListener(blurListener);
        mySecondField.addBlurListener(blurListener);

        // add the text-fields to the UI
        addComponent(myFirstField);
        addComponent(mySecondField);
    }
}

第 2 步：风格

.v-caption-red-caption {
  color: red;
}

第 3 步：结果

【讨论】：