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

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

Parents
  • 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;
    }

Reply
  • 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;
    }

Children
No Data