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を見ると（下の画像を参照）、テキストフィールドのみがとなります。となります。したがって、キャプション用に定義したスタイルは適用されません。状況の下で、あなたが使用できる迅速な回避策は、&ブラーリスナーをテキストフィールドに追加することです。これは、定義するカスタムスタイルを削除する&を追加します。

ステップ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：結果