Wordpress Contact Form 7 label effect when input not empty

Question

I am trying to get the floating label effect on Contact Form 7 and ran into a problem. I got the label effect to work on input:focus but I can not get the effect to hold once I enter letters and move to the next input.

In other words I need to label to stay up when the input is not empty.

here's my code:


   
       [text* your-name]FULL NAME

and the css:

.wpcf7-form .input-wrapper{
    width:47%;
    height: 50px;
    position: relative;
}

.wpcf7-form input{
    width:100% !important;
    background: none !important;
    border:none !important;
    height: 30px !important;
    margin:20px 0 0 0 !important;
}

.wpcf7-form .eticheta{
    width: 100%;
    display: block;
    transition: all 0.3s ease;
    position: absolute;
    top:10px;
}

.wpcf7-form label:focus-within .eticheta, .wpcf7-form input:valid + .eticheta
{
top:0px;
}

I understand that .wpcf7-form input:valid + .eticheta doesn't work as they do not have the same parent. The input has a span around it. I am guessing that's why it doesn't work but I cannot figure out how to get it done

user_14876608 · Answer

.form-parent {
  width: 323px;
  height: auto;
  background: transparent
    url("https://3.bp.blogspot.com/-gvfHlb6JnY4/VPnwlkELmhI/AAAAAAAAKDU/9lgOeCd279E/s1600/contact-button.png")
    no-repeat right 10px;
  position: fixed;
  top: 150px;
  left: -275px;
  z-index: 9999999;
  transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -webkit-transition: all ease 0.6s;
  -o-transition: all ease 0.6s;
}
.form-parent:hover {
  left: 0;
}
.cc-float-form {
  background: -moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
  background: -webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
  background: -o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
  background: -ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
  background: linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);
  color: #fafafa;
  padding: 10px;
  width: 250px;
  border: 2px solid #000;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#ContactForm1 {
  display: none;
}
.contact-form-area {
  background: #222;
  width: 245px;
  padding: 10px 0px;
  border: 1px solid #111;
  box-shadow: 2px 2px 2px #111 inset;
  -webkit-box-shadow: 2px 2px 2px #111 inset;
  font-family: Verdana, Geneva, sans-serif;
  color: #fafafa;
  font-size: 12px;
}
#cc {
  float: right;
  font-size: 9px;
  margin-top: -10px;
  color: #777;
}
#cc a {
  color: #777;
  text-decoration: none;
}


        
        
        Name:

        
        
        Email:
        *

        
        
        Message: *

        
        
        
        
        
        
        
        
        
        By Prio-Soft™

Wordpress Contact Form 7 label effect when input not empty

1 Answers