Add CSS variables

Using Nintex CSS variables helps ensure your plugin blends seamlessly with native form controls.

For an example plugin that uses CSS variables, see the styled-input plugin in the Examples repository.

Jump to:

Define your CSS

Define the CSS your plugin uses using the Nintex variables.

For a list of available variables, see Style plugins with CSS.

.form-control {
  color: var(--ntx-form-theme-color-secondary);
  background-color: var(--ntx-form-theme-color-input-background, transparent);
  font-size: var(--ntx-form-theme-text-input-size);
  font-family: var(--ntx-form-theme-font-family);
  border: 1px solid var(--ntx-form-theme-color-border);
  border-radius: var(--ntx-form-theme-border-radius);
}
.form-control:focus { 
  outline: none;
  border-color: var(--ntx-form-theme-color-primary);
}

Add styles as a tagged template literal

Note: The following implementation uses the Lit framework. Your plugin's implementation may be different. For an overview of developing with Lit, see Get started with web components and Lit.

In your plugin's class definition:

  1. Wrap your CSS definition with backticks to create a template literal.
  2. Prefix it with the Lit function css to create a tagged template literal.

    3. This function converts the template string into CSS to be applied to the web component. If you are using a different framework, consult the framework's documentation.

  3. Assign the function output to the static property styles.
export class NintexStyledInput extends LitElement {
  
  static styles = css`
    .form-control {
      color: var(--ntx-form-theme-color-secondary);
      background-color: var(--ntx-form-theme-color-input-background, transparent);
      font-size: var(--ntx-form-theme-text-input-size);
      font-family: var(--ntx-form-theme-font-family);
      border: 1px solid var(--ntx-form-theme-color-border);
      border-radius: var(--ntx-form-theme-border-radius);
    }
    .form-control:focus { 
      outline: none;
      border-color: var(--ntx-form-theme-color-primary);
    }
  `;