• State Verified Answer
  • +1 person also asked this people also asked this
  • Replies 2 replies
  • Subscribers 13 subscribers
  • Views 7515 views
  • Users 0 members are here
Options
Related

Change style of default Form button (without using a full custom html button)

AngelaIp

Hi community,

has anybody some experience with customizing the standard blue form buttons in Innovator?

I want to make them

  • not blue
  • fixed size independent from button label
  • round corners (nice to have)

I know that it´s possible to design full custom buttons with html elements. But this also means we have to take care for everything and cannot use the standard field events for adding onClick Methods.

I so far have not found any sample that shows how to change the styling of the standard buttons. I assume this is possible with CSS. Does anybody has an sample to share?

Thanks again for any help!
Angela

  • +1

    Hi Angela,

    I have used the following before, so maybe it will help you, too.
    The background colour can simply be picked under the "Field Type" tab when editing the form:

    Under the "Form Body" tab, you can then insert some CSS for input elements that are buttons:

    Then button then looks like this:


    The "border-radius" makes the corners round, since that was one of your requirements.

    Hope this helps,

    C

  • 0

    Hi cogres,

    beautiful! Thanks for your fast and helpful answer! I can confirm that your solution does exactly what I was looking for. 

    I extended your solution so it also change the color of disabled button. By default, disabled buttons have a white background. With the white background disabled buttons look like text labels and people don´t see that there is a button behind.

    This one colors disabled buttons grey: (disabling is done via Method...)

    input[type="button"]{
    max-height: 200px;
    max-width: 2000px;
    border-radius: 25px;
    }
    input[type="button"]:disabled{
    background: #dddddd;
    }