Change caption on TextField focus

Question

In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with 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
  }

if im correct, you cant have parent selectors in CSS3, but they will be avaiable at CSS4.. you should fire some event when focusing, that will add a class to the header, and removes the class from header if you blur the textfield — inubs, Jun 28 '16 at 14:04
Check this example http://stackoverflow.com/questions/36400631/cant-get-label-and-input-to-work-on-focus — Pugazh, Jun 28 '16 at 14:04

score 5 · Accepted Answer · edited May 23 '17 at 12:24

Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.

From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.

Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.

Step 1: The component

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);
    }
}

Step 2: The style

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

Step 3: The result

Change caption on TextField focus

1 Answers1