Apply global CSS to Nintex form Buttons


Badge +6

Hey guys,

Does anyone know how to change the CSS style for ALL buttons in a Nintex form?

Neither .input nor .nf-button-input with !important seem to work, e.g.:

.input {

    border: 3px solid red !important;

}

.nf-button-input{

    border: 3px solid green !important;

}

I tried adding the above lines at the bottom of the Custom CSS section but nothing happened...

I then tried adding a custom .css file and reference it via Advanced > "Custom CSS includes", again with no luck!

Any ideas what I might be doing wrong?!

PS: I don't want to have to add specific CSS classes to each and every button, I'm more interested in a generic/future proof solution.

Thanks!


3 replies

Userlevel 6
Badge +16

I suggest you to debug the rendered form with Chrome developers tools (F12). There you can see what class is being applied to your button

Badge +6

Hey Fernando,

That was the first thing I tried, but the Nintex controls seem to have a large number of properties already set upon them in the "Computed" style column: 185594_pastedImage_0.png

I'll try to use the option "Clear formatting" on all controls, and see if that will finally allow me to overwrite their CSS! happy.png

Badge +6

OK found it, it seems that all Nintex form buttons are of this class:

input[type="button"], input[type="submit"] {

    border: 3px solid blue !important;

}

Actually, just input[type="submit"] seems to work fine!

Reply