Change look of buttons inside of the form

  • Jon_Best
    Asked on May 17, 2015 at 3:44 AM

    I am trying to set only the right and left borders for the submit and reset buttons at 5px double #333.  However, even if I !important the rules for right and left borders in CSS Helper, they only show up in Designer and not on the actual contact form.  So then I set border width 5px, border style double, and border color #333 in Button Styles and set rules for the top and bottom borders of the buttons at 0 (while adding !important to the end of the rules, which is how the form is currently set) in CSS Helper with the same results: they borders show up (or in the case of the top and bottom borders, don't show up) correctly in Designer but not on the actual form.

     

    Is there a way to set the right and left borders of the buttons without affecting the top and bottom borders?  Thanks for your time.

    <div_prefs id="div_prefs">

  • BJoanna
    Replied on May 17, 2015 at 6:30 AM

    I have tested your form and it seems that there are some CSS conflicts.

    Can you please try to add this code inside of your code for button inside of form designer.

    #input_2, #input_reset_2 {

        background : linear-gradient(#333 2%, #666 5%, #999 15%, #ccc 45%, #fff 48%, #fff 52%, #ccc 55%, #999 85%, #666 95%, #333 98%) !important;

        border-right : 5px double #333 !important;

        border-left : 5px double #333 !important;

        border-top : 0 !important;

        border-bottom : 0 !important;

        border-radius : 15px !important;

        padding : 0 0 2px 0 !important;

    }

    After adding new code your form will look like this.

    Change look of buttons inside of the form Image 1 Screenshot 20

    Here is a demo form I made with new code: http://form.jotformpro.com/form/51362902961960? 

    Hope this will help. Let us know if you need further assistance.