Jump to content
harry_ord

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;
}

 

Share this post


Link to post
Share on other sites

What's with the random "i" following the "button"?

Share this post


Link to post
Share on other sites

I don't know, i just used the inspect element and copy/paste the code in my theme's custom CSS and replaced the background color for the color i wanted.

I deleted the "i"s and the button lost its color. The "i"s are necesary.

Edited by harry_ord

Share this post


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.

Share this post


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...