Adaptive Placeholder

  • Hi.
    I’m trying to put an adptive placeholder on my form.
    I’ve already made some changes on the placeholder on focus but I can’t make it overlap the answer box. Do you know how can I do this?

    This is the CSS I applyed to the placeholder: 

    
input:focus::-webkit-input-placeholder { 
    transform:translateY(-25px);
    background-color: #fff;
    color: #333;
    z-index: 2;
}

input:focus:-moz-placeholder { 
    margin-top: -57px;
    background-color: #fff;
    color: #333;  
} /* Firefox 18- */

input:focus::-moz-placeholder { 
    margin-top: -57px;
    background-color: #fff;
    color: #333;  
} /* Firefox 19+ */

input:focus:-ms-input-placeholder { 
    margin-top: -57px;
    background-color: #fff;
    color: #333;  
} /* IE 8 and older ;) */

    I try to use z-index but doesn’t work.

    • This topic was modified 5 years, 11 months ago by kmasi.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Please add a link to your form here so others can examine your form CSS using Dev Tools.

    Thread Starter kmasi

    (@kmasi)

    Hi,
    Sorry, I can’t do this because I’m developping the website on a private network.
    I hope someone can help me by the way. The CSS is the original one, the only change I’ve made is the one that I put above (that doesn’t work).

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adaptive Placeholder’ is closed to new replies.