更改 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-based（也是 java 8），但非常欢迎您提出更正和建议。

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

同时查看 DOM（见下图），只有 text-field 得到 focused，因此 none 的样式你' 为标题定义得到应用。在这种情况下，您可以使用一种快速解决方法，即向您的 text-field 添加焦点和模糊侦听器，这将添加和删除您也将要定义的自定义样式。

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

更改 TextField 焦点上的标题

Change caption on TextField focus

css

vaadin