css override, no placeholder

  • Resolved florianhwm

    (@florianhwm)


    6 years, 9 months ago

    Hi, great plugin/widget by the way. Does exactly what I needed.
    One question:

    Due to the dark/black footer, where the mail-form is implemented, I had to change the background-color of the form to white.
    So I wrote this into my theme’s custom css:

    .yikes-easy-mc-form input[type=”text”], .yikes-easy-mc-form input[type=”url”],
    .yikes-easy-mc-form input[type=”email”], .yikes-easy-mc-form input[type=”number”],
    .yikes-easy-mc-form select {
    background-color: #fff !important;
    border:none !important;
    color:#000 !important;
    padding-left:5px !important;
    }

    Instead of the label I wanted a placeholder for a more compact design. So I checked “Toggle field label visibility” and set a placeholder.

    Unfortunately, that placeholder only appears, when I disable the custom css. With that custom css, there’s no placeholder.

    example-url: http://www.florianwmueller.com/about/

    Any suggestions?

    Thank you,
    Florian

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor yikesitskevin

    (@yikesitskevin)

    6 years, 9 months ago

    Hello Florian,

    The issue is that the placeholder is white and the field background color is white. To solve this we’ll need to apply a style to the placeholder. Unfortunately styling placeholders is not standardized so you need to add four different pseudo-elements. You can use this snippet as an example of how to do it – it will work for the form on the URL you linked to but it is only targeting email fields.

    .yikes-easy-mc-form input[type="email"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000 !important;
}
.yikes-easy-mc-form input[type="email"]::-moz-placeholder { /* Firefox 19+ */
  color: #000 !important;
}
.yikes-easy-mc-form input[type="email"]:-ms-input-placeholder { /* IE 10+ */
  color: #000 !important;
}
.yikes-easy-mc-form input[type="email"]:-moz-placeholder { /* Firefox 18- */
  color: #000 !important;
}

    Let me know how that goes.

    Cheers,
    Kevin.

    Plugin Contributor Tracy Levesque

    (@liljimmi)

    🏳️‍🌈 YIKES, Inc. Co-Owner

    6 years, 9 months ago

    Hi @florianhwm,

    Did that code help out at all?

    Let us know,

    Thank you!
    -Tracy

    Plugin Contributor Tracy Levesque

    (@liljimmi)

    🏳️‍🌈 YIKES, Inc. Co-Owner

    6 years, 8 months ago

    Hi. @florianhwm,
    We haven’t heard back from you in awhile, so I am going to close out this ticket.

    If you need further help, please reopen it and we will be happy to help you.

    Thank you!
    -Tracy

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘css override, no placeholder’ is closed to new replies.