Change translateY of element on input focus

Question

I'm trying to apply an effect on an element when user focus on input. I've read that I can accomplished that without the use of jQuery by using css selectors (+, ~, >). Well The problem is that the client uses Contact From 7 that renders a lot of code.

Here is the code

<div class="theInput">
    <span class="wpcf7-form-control-wrap your-name">
        <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" />
    </span>
    <span class="theLabel" id="your-name">Name</span>
</div>

As you can see the "spans" are from contact form 7. I'm trying to translateY the class theLabel by using the css selector "+".

What I've tried so far

the final thought was to be as more detailed I could regarding the classes

span.wpcf7-form-control-wrap.your-name input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.effectForm:focus + .theLabel{
    transform:translateY(-25px);
    }

One thought was to be generic

input:focus + .theLabel

Other thought was to be too generic

input:focus .theLabel

and many more other combinations, all of them failed. I know that I'm doing something wrong. But I can't find what.

Thank you :)

score 1 · Answer 1 · edited May 23 '17 at 11:53

You are attempting to select a parent element's sibling with CSS. See this related answer: CSS: how to select parent's sibling

If you can edit the HTML, you can move the input HTML element to the same level of the DOM hierarchy as the span.theLabel element to enable you to use the CSS sibling selector (+). An example is in this fiddle.

HTML

<!-- the span wrapper around the input has been removed, moving the input to the same
DOM tree level. -->

<div class="theInput">
  <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" />
  <span class="theLabel" id="your-name">Name</span>
</div>

CSS

/* Note the display:inline-block needed for the transform to work as well as vendor
prefixes */

input.wpcf7-text:focus + span {
            display: inline-block;
  -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
          transform: translateY(-25px);
}

If you cannot change the HTML markup you would need to use javascript to select span.theLabel as shown in the top linked answer.

Thank you for your answer :) Unfortunately I can't change the html. (I must edit the plugin it self and with the 1st update It's gonna break). I ended up using JS for this. — , Apr 08 '15 at 10:40

Change translateY of element on input focus

1 Answers1