Jump to content

input[type="button"] has style on Chrome but not on Firefox


Recommended Posts

Hello, this is my site:

https://www.centrovision.com.gt/#contactanos

I have a contact form here with a blue submit button. Actually, only if you are using Chrome the button is blue, if you are using Firefox or Internet Explorer, you just get a default no-style html button.

Why doesn't Firefox comply with my css?(i don't care about i.e).

Here's my css for the button:

 

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    color: #ffffff !important;
    background: #014780;
    border-width: 1px !important;
    border-color: rgba(93,182,46,0.03);
    letter-spacing: 0px;
    font-size: 16px;
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important;
    padding-left: 0.7em;
    padding-right: 2em;
    padding: 0.3em 1em !important;
    display: inline-block;
    margin: 0 0 0 15px;
    font-family: inherit;
    cursor: pointer;
    float: right;
    padding: 0.3em 1em;
    border: 2px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7em !important;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

 

Link to post
Share on other sites

Ok, so i did another inspection, now on Firefox, i identified the element whose style i wanted to change and it was the class wpcf7-submit. So i added this to my custom css and now it's working:

 

.wpcf7-submit {
    color: #ffffff !important;
    background: #014780;
    border-width: 1px !important;
    border-color: rgba(93,182,46,0.03);
    letter-spacing: 0px;
    font-size: 16px;
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important;
    padding-left: 0.7em;
    padding-right: 2em;
    padding: 0.3em 1em !important;
    display: inline-block;
    margin: 0 0 0 15px;
    font-family: inherit;
    cursor: pointer;
    float: right;
    padding: 0.3em 1em;
    border: 2px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7em !important;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

Moral of the story: always try to do everything yourself. I copied the style from other site made by other person with the same WordPress theme. For being lazy i finished working more.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...