Customizing "Back" & "next" button - problem

  • Profile Image
    switchedonaustralia
    Asked on June 27, 2013 at 11:46 PM

    Hi, 

     

    I'm trying to use custom images for the "next" & "back" buttons on my form, and it's almost 100% perfect, except for one issue. All the button styles to choose from apply CSS which has a border that try as I might, I haven't been able to over-rule.

     

    Ussing injected CSS I've managed to over-rule most aspects of the default CSS, but the border just doesn't seem to want to co-operate - any ideas?

     

    The link will take you to a page that uses the form - click the "apply now" button to see it. I've minimsed the impact as best I can by using the "simply white" button style, but there is still a grey border showing up around my custom images. 

  • Profile Image
    switchedonaustralia
    Answered on June 27, 2013 at 11:48 PM

    Just thought then - would probably help if I gave you the CSS I'm using too - here it is:

    .form-image

    {

    text-align: center;

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    v-align: center;

    }

     

    .form-pagebreak

    {

    text-align: center;

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    v-align: center;

    }

     

    .form-textbox

    {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    }

     

    .form-dropdown

    {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    }

     

    .form-header-group

    {

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    text-size:18px;

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    text-align: center;

    }

     

    .form-pagebreak-next

    {

    display:block;

    text-size:12px;

    float:right;

    margin-left: 250px;

    background:url("http://switchedonaustralia.com/images/button-next.png") no-repeat  !important;

    width:155px !important;

    height:61px !important;

    }

     

    .form-pagebreak-back

    {

    display:block;

    text-size:12px;

    float:left;

    margin-left:20px;

    background:url("http://switchedonaustralia.com/images/button-back.png") no-repeat  !important;

    width:155px !important;

    height:61px !important;

    }

     

    .form-submit-button-simple_white

    {

    text-indent:-99999px !important;

    border:0px #fff none !important;

    }

  • Profile Image
    sidharth_kch
    Answered on June 28, 2013 at 03:37 AM

    @switchedonaustralia

    Do you want to remove the borders from your next and back buttons?

    You should add this css in your page break css (.form-pagebreak-back / .form-pagebreak-next):

    box-shadow: none !important;

    border: none !important;

    Let us know if this helps your.

    Thanks,

    Sidharth

  • Profile Image
    switchedonaustralia
    Answered on July 03, 2013 at 07:05 PM

    Wonderful - thank you. Worked a treat.

     

    Looking at it - I should have realised the box-shadow was to blame.