how to override mailchimp button css

Question

I am trying to override mail chimp css if I add inline css like

<input type="submit" value="SUBSCRIBE" background: #111; name="subscribe"  id="mc-embedded-subscribe" class="button">

this is working fine.

In this case, I am unable to use :hover along with mc-embedded-subscribe id. I mean if I write

#mc-embedded-subscribe .button {
    background: #222;
}

This is not working, also

#mc-embedded-subscribe input.button {
    background: #222;
}

is not working.

Please let me know how to make color change on hover for subscribe button in mailchimp,

Thanks

Answer 1

Try adding !important to ensure your background rule isn't being overridden. Is something else has higher specificity your CSS will be ignored.

#mc-embedded-subscribe:hover {
  background: #222 !important;
}

Answer 2

Your CSS code is set to find a child (.button) of #mc-embedded-subscribe. When really, they are the same thing as the button has a class and id.

Just do:

#mc-embedded-subscribe {
    background: #111;
}

#mc-embedded-subscribe:hover {
    background: #555;
}

See here: http://jsfiddle.net/UteLC/3/

If that isn't working, you may need to add the !important so that your css overrides the default MailChimp css like this:

#mc-embedded-subscribe:hover {
    background: #555!important;
}

Answer 3

Just add "!important" at both places, it worked for me.

For example:

#mc-embedded-subscribe {
    background: #111!important;
}

#mc-embedded-subscribe:hover {
    background: #555!important;
}

You can see it live at this blog.

Just click on any post and look at the sidebar for the redesign in action.

Hope this helps.