Fields disappearing on click

  • Resolved ahamaton

    (@ahamaton)


    9 years, 11 months ago

    Hi Guys

    Great plugin.

    As a newbie with absolutely no experience with WP, php, css, shortcodes or anything, I found it a bit of work to get used to this. However, I’m relatively confident with it now and am positively surprised by the results, so compliments on a quality plugin that is usable for a beginner like me. However, I have had just a couple of formatting issues. I am finding what look like answers on some which I have to reaearch but I have found nothing on this. I am testing a form as a customer and find when I click on a field the field disappears and as the background is an image it’s not always easy to see what you’re writing. Do you know what is causing this and how I can get the field to stay there when it is being used ? Thanks

    https://wordpress.org/plugins/contact-form-7-style/

Viewing 1 replies (of 1 total)
  • Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    9 years, 11 months ago

    Greetings,

    First of all we are very sorry for this late response and thank you for your opinion.

    After a deeper research we came to the following conclusion:
    – there may be a styling reset for your fields in the theme you are using, or this reset may come from the plugin itself, where the “bakcground:inherit;” style is added to the frontend.css
    So on the :focus pseudo class of your field the styling is reset and it may cause it to disappear.

    To fix this issue, you need to set a style for the :focus pseudo class of your fields. In our current version of the Contact Form 7 Style plugin this can be achieved at the CSS Editor tab (which is under the Add new style menu), where you can add the following CSS snippet:

    
body .cf7-style input[type="text"]:focus,
body .cf7-style input[type="email"]:focus,
body .cf7-style textarea:focus {
	background: #000000;
}

    In our example we added a black background color to our fields, but you can change that to another color used on your fields in normal state.

    The :focus pseudo class can be customized with CSS in modern browsers, and it points out the moment when a user click the desired element. You can read more about this at the: https://css-tricks.com/almanac/selectors/f/focus/

    If our answer resolved your problem or you enjoyed using the Contact Form 7 Style add-on please consider donating or add a five star review(which can be done here: https://wordpress.org/support/plugin/contact-form-7-style/reviews/#new-post ). Your opinion means a lot for us and it will help this Add-on out for further development.

    Best Regards,
    Lehel

Viewing 1 replies (of 1 total)

The topic ‘Fields disappearing on click’ is closed to new replies.