target div using input:focus

I have the following code:


<div class="row half odd">
<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" aria-required="true" aria-invalid="false">
</span>
<label>Your name</label>
</div>

But I need to target the label when the input is focussed. If the input label was directly after the input field I could use the following css


input:focus ~ label {
 top:-20px;
 font-size:14px;
 color: #009688;
}

But I have to have the span wrapper for the input field as it's part of the Contact Form 7 plugin in WordPress.

Any ideas how I can select the label?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <link rel="stylesheet" href="screen.css" media="screen"> <style media="screen"> .color { color:#900; text-transform:uppercase; } </style> </head> <body> <div class="row half odd"> <span class="wpcf7-form-control-wrap your-name" tabindex="1"> <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"> </span> <label> Your name</label> </div> <script> (function() { 'use strict'; var inp=document.getElementsByTagName('input'); var lab=document.getElementsByTagName('label'); var c; for(c=0;c<inp.length;c++) { if(inp[c].name==='your-name') { inp[c].addEventListener('focus', function() { for(c=0;c<lab.length;c++) { if(lab[c].textContent.match('Your name')) { lab[c].classList.add('color'); }}},false); inp[c].addEventListener('blur', function() { for(c=0;c<lab.length;c++) { if(lab[c].textContent.match('Your name')) { lab[c].classList.remove('color'); }}},false); } } }()); </script> </body> </html>

target div using input:focus

greencode

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week