What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    My form's submit button is appearing differently in different browsers..

    Asked by Esther17 on January 21, 2016 at 09:47 AM

    Hi there,

    I got a form from the theme store and changed it a fair amount in the css to match my website design but for some reason the submit button is appears in different ways on various browsers.. like on firefox for instance, it does the opposite thing with the colours, on internet explorer it doesn't show the hover colour.. it's not very important but I was just curious why that happens.. is there a way to fix it?

    Here is the link to the page: http://www.ekdesigns.co.uk/Upload/contact.html

    Thanks!

    Esther.

    Page URL:
    http://www.ekdesigns.co.uk/Upload/contact.html

    different in colour www thanks
  • Profile Image
    JotForm Support

    Answered by Boris on January 21, 2016 at 01:38 PM

    This is actually a very interested topic. The CSS used is not actually written in a cross-browser manner, resulting in the browsers each interpreting a different rule for the Submit button's background color.

    The background is set as an image, by using a linear-gradient. Here is the relevant part of your code, take note of the parts marked with orange background, and specifically red text:

    .form-submit-button, .form-submit-reset, .form-submit-print {
        cursor : pointer;
        -moz-border-radius : .0em;
        -webkit-border-radius : .0em;
        border-radius : .0em;
        padding : 0px 0px;
        color : #FFF;
        font-family : Arial, Helvetica, sans-serif;
        font-size : 12px;
        text-shadow : 0px 0px 0px #142353;
        border : 0px solid #427C99;
        -moz-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
        -webkit-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
        box-shadow : inset 0px 0px 0px rgba(147, 187, 255, 0.61), 0px 0px 0px 0px rgba(0, 0, 0, 0.26);
        background : #e9c322;
        background : -moz-linear-gradient(top, #e9c322 0%, #000000 0%);
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5b427), color-stop(100%,#e5b427));
        background : linear-gradient(top, #e9c322 0%, #000000 0%);
        filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D8FB0', endColorstr='#000000', GradientType=0 );
        padding : 0px 0px;
        font-family : "Lato-Light", sans-serif;
        font-size : 18px;
        font-weight : normal;
        outline : none;
        position : relative;
        z-index : 11111111111111111;
    }

    .form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover {
        border : 0px solid #e9c322;
        -moz-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
        -webkit-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
        box-shadow : inset 0px 0px 0px rgba(147, 187, 255, 0.61), 0px 0px 0px 0px rgba(0, 0, 0, 0.26);
        background : #e9c322;
        background : -moz-linear-gradient(top, #e9c322 0%, #e9c322 100%);
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#2d2d2d));
        background : linear-gradient(top, #252525 0%, #252525 100%);
        filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );
    }

    .form-submit-button:active, .form-submit-reset:active, .form-submit-print:active {
        border : 0px solid #e9c322;
        -moz-box-shadow : inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
        -webkit-box-shadow : inset 0px 0px 0px 1px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
        box-shadow : inset 0px 1px 0px rgba(147, 187, 255, 0.61), 0px 2px 2px 0px rgba(0, 0, 0, 0.26);
        background : #e9c322;
        background : -moz-linear-gradient(top, #e9c322 0%, #e9c322 100%);
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#252525), color-stop(100%,#252525);
        background : linear-gradient(top, #252525 0%, #252525 100%);
        filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );
    }

    As you can see in the part marked in red, each browser is instructed to display a different background linear gradient. The code for Firefox is:

    background : -moz-linear-gradient(top, #e9c322 0%, #000000 0%);

    It means that Firefox will use color black (#000000) from the start of the button (0%) to the end. Button is black in Firefox.

    Code for Chrome is:

    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5b427), color-stop(100%,#e5b427));

    Chrome will use a gradient from color gold (#e5b427) to color gold (#e5b427) - so it appears as color gold.

    Cross browser gradient is broken, as there is no such thing as "top" in linear-gradient. You should use "to bottom" instead of "top". Here is the code:

    background : linear-gradient(top, #252525 0%, #252525 100%);

    It is set to have color dark gray (#252525), from start to finish. However, using the keyword "top" breaks this rule, so this line is ignored by all browsers. You should us "to bottom" instead, or even remove the word "top," (with the comma) from the rule to make it work again:

    background : linear-gradient(#252525 0%, #252525 100%);

    And finally, old versions of Internet Explorer are set to have the same gradient as the standard rule was supposed to have, if it were not broken:

    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );

    This is from color dark gray (#252525), to the same color.

    As I do not know which of these many different gradients you actually wanted to have on your submit button, I can't say exactly what to change your code into. However, if you want to have a consistent look across browsers, you should use the same color in all of the rules.

    The same issue applies to the :hover and :active states as well - the CSS code is simply set as such that each browser is instructed with a different color in its gradient, and the standard rule that all browsers would follow is broken.

    I hope this helps. Please let us know if you need any further assistance, and we will be happy to help.

  • Profile Image

    Answered by Esther17 on January 21, 2016 at 03:37 PM

    Thanks so much!  It worked perfectly.  I'm not really used to editing CSS so that's why.  It makes a lot more sense now.

     

  • Profile Image

    Answered by victor on January 21, 2016 at 06:57 PM

    On behalf of my colleague, you are welcome. If you have any other question, please let us know. We will be glad to help.