更改TextField焦点上的标题

Question

在我的Vaadin App中，我想改变焦点TextField的颜色，这没问题。另外我想改变属于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
  }

Answer 1

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

从我收集的内容来看，这种情况下的问题是你需要更新聚焦的输入的前一个兄弟，即它的标题。我做了一些研究并so far it does not seem possible with CSS。

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

第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步：结果