更改TextField焦点上的标题

Question

在我的Vaadin应用程序中,我想改变焦点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),但更正和建议非常受欢迎.

从我收集的内容来看,这种情况下的问题是你需要更新聚焦的输入的前一个兄弟,也就是它的标题.我做了一些研究,到目前为止用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步:结果