Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #906598
CF7
Closed

Comments

  •  2
    Weslie started the conversation

    Hi, I'm having difficulty formatting the placeholder colour for CF7. 

    As you can see from screenshot attachment, the placeholder background appears translucent....I need it to be white, otherwise it doesn't show properly in my footer.

    also, when a placeholder is selected, the border turns blue...it would be better if it matched my submit button colour.

    any css for this?

    thank you

  •  7,106
    Oliver replied

    Hi, 

    Please try to use next css to change placeholder color

    /* for input fields */
    .wpcf7 input::-webkit-input-placeholder {color: #ccc;}
    .wpcf7 input::-moz-placeholder          {color: #ccc;}/* Firefox 19+ */
    .wpcf7 input:-moz-placeholder           {color: #ccc;}/* Firefox 18- */
    .wpcf7 input:-ms-input-placeholder      {color: #ccc;}
    
    /* for textarea */
    .wpcf7 textarea::-webkit-input-placeholder {color: #ccc;}
    .wpcf7 textarea::-moz-placeholder          {color: #ccc;}/* Firefox 19+ */
    .wpcf7 textarea:-moz-placeholder           {color: #ccc;}/* Firefox 18- */
    .wpcf7 textarea:-ms-input-placeholder      {color: #ccc;}
    

    If you want to change placeholder color for current form you can add extraclass to your CF7 form and use this css with extraclass.

    For change selected input field border color use

    .wpcf7 input:focus,
    .wpcf7 textarea:focus{
        border-color: orange;
    }


    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver