Remove placeholder when cursor placed to form

  • Resolved gmwp1111

    (@gmwp1111)


    6 years, 5 months ago

    Hi,

    I would like the placeholder of the form to disappear as soon as the cursor is placed into the form and not only after the user stared typing in his email address.
    How can that be done?

    Thanks!

    Best,
    Georg

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Harish Chouhan

    (@hchouhan)

    6 years, 5 months ago

    Hey Georg,

    This would require additional custom CSS. I would recommend checking http://www.toolinfy.com/hide-placeholder-text-on-focus-css to learn more.

    Thread Starter gmwp1111

    (@gmwp1111)

    6 years, 5 months ago

    Thanks!
    I was able to figure out how to set the color of the placeholder to transparent after focus:

    .mc4wp-form:focus-within ::-webkit-input-placeholder {
	color: transparent;
}

    Thanks!
    Best,
    Georg

    • This reply was modified 6 years, 5 months ago by gmwp1111.
    • This reply was modified 6 years, 5 months ago by gmwp1111.
    • This reply was modified 6 years, 5 months ago by gmwp1111.
    Thread Starter gmwp1111

    (@gmwp1111)

    6 years, 5 months ago

    This is finally what I use to cover more browsers:

    .mc4wp-form:focus-within ::-webkit-input-placeholder {
	color: transparent;
}

.mc4wp-form:focus-within :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: transparent;
	opacity: 1;
}

.mc4wp-form:focus-within ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: transparent;
	opacity: 1;
}

.mc4wp-form:focus-within :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: transparent;
}
    Plugin Contributor Lap

    (@lapzor)

    6 years, 5 months ago

    Awesome, thanks for sharing!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Remove placeholder when cursor placed to form’ is closed to new replies.