Unable to style button

  • Resolved sandarbhasthana

    (@sandarbhasthana)


    3 years, 3 months ago

    Hi,

    I’ve added a form on the homepage and I can stylize every input field except the submit button.

    I need it same as the submit button as in https://www.spitiinterio.com/contact which has also been designed by me except it uses WPForm.
    Now the only difference I see between both forms are:

    
<ul>
<li>WPForm uses <button type="submit"/> </li>
<li>Contact Form 7 uses <input type="submit"/> </li>
</ul>

    An online forum has guided me to use

    
.wpcf7 input[type="submit"] {
//style
}

.wpcf7 input:hover[type="submit"] {
//style
}
 .wpcf7 input:active[type="submit"] {
//style
}

    But neither my class selectors or the above code seems to work except for the
    box-shadow property

    I understand maybe as <input> is null element I cannot stylize it properly.

    Any help to either fix the above issue or to guide me to add a <button type=”submit”> to my Contact Form 7 would be highly appreciated !

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Yordan Soares

    (@yordansoares)

    3 years, 3 months ago

    Hello @sandarbhasthana,

    You can add styles to the submit button using the input.wpcf7-submit, input.wpcf7-submit:hover, and input.wpcf7-submit:active selectors, this way:

    /* CF7 submit button */
input.wpcf7-submit {
    background-color: ##0070ca;
    color: #fff;
    width: 100%;
}
/* CF7 submit button (hover) */
input.wpcf7-submit:hover {
    background-color: #2196F3;
}
/* CF7 submit button (active) */
input.wpcf7-submit:active {
    background-color: #2196F3;
}

    Please read Styling contact form to learn more.

    Best regards,
    Yordan.

    Thread Starter sandarbhasthana

    (@sandarbhasthana)

    3 years, 3 months ago

    Hi @yordansoares,

    The above code doesn’t seems to do work on my end. I tried Contact Form 7 styling link but it has no explanation on styling

    <input type="submit">

    Can you please tell me if this issue is due to <input type=”submit”> rather than <button type=”submit”>

    Regards,
    Sandarbh

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