JF altering Image Button

  • Profile Image
    Asked on November 20, 2011 at 02:57 AM


    I uploaded an image Submit button to my form which has squared corners (screenshot) but the form is rounding the top corners.  I assume it has to do with the theme I am using..?

    Is it possible to either get rid of the rounded corners on my Image Button or at least round all 4 of them?


  • Profile Image
    Answered on November 20, 2011 at 04:01 AM

    Yes, the round borders is due to the template that you are using.  This is rendered by the CSS script. If you do not wish to alter the theme, you can simply add this to your CSS injection script:

    .form-textbox,.form-textarea,.form-dropdown,.form-list{-webkit-border-radius: 0; -moz-border-radius:0;border-radius:0;

    Let us know if this does not work.

  • Profile Image
    Answered on November 20, 2011 at 05:01 AM

    With due respect to my colleague, as he has stated, the rounded borders are indeed due to the template but the declarations that need to be overridden in the said template are to be found in the following rule:

    .form-submit-button, .form-submit-reset, .form-submit-print {
    -moz-border-radius:4px 4px;
    -webkit-border-radius:4px 4px;
    border-radius:4px 4px;
    padding:8px 4px;
    border-color:#7C7C7C #C3C3C3 #DDDDDD;

    Therefore, injecting the following will solve the problem:

    .form-submit-button {

    After doing that, your "Apply" button should look like that in the screenshot below:

    (Click image to visit live form) 

    Although you didn't ask about it, I'm sure you're also wondering why the cursor:pointer declaration is not changing the hand to an arrow in Chrome (and possibly other browsers). There appears to be information about this online and should I find a solution I'll let you know.

    LOL My bad.
    cursor:pointer is supposed to be displayed as a hand.

  • Profile Image
    Answered on November 20, 2011 at 03:59 PM

    Worked like a charm!!

    Thank you as always! :)