Customize input/button size

Get Help
,
1

Is there a way to customize the widget input and buttons size (sm/md/lg)?
It would be nice to be able to have this customization without CSS or going all the way with ACUL.

3

Hi @julia.dibo

WElcome to the Auth0 Community!

Unfortunately, there is currently no built-in setting in the Auth0 Dashboard to customize the size of the widget’s inputs or buttons without using CSS.

The visual editor in the Auth0 Dashboard (under Branding > Universal Login) exclusively controls colors, fonts, logos, and border radii. It intentionally restricts layout sizing to guarantee that the widget remains strictly WCAG accessible and mobile-responsive out-of-the-box.

You can achieve your exact goal entirely within the Auth0 Dashboard using the simplest form of ACUL (the basic HTML Page Template) with just a few lines of copy-and-paste CSS.

If you decide to take this route, here is how you do it in less than 2 minutes:

  1. Go to your Auth0 Dashboard > Branding > Universal Login > Advanced Options .
  2. Click the Login Templates tab.
  3. Toggle on Customize Login HTML .
  4. In the code editor, look for the <head> section and inject a <style> block that overrides the native CSS variables for sizing.

For example, to create a “Large” (lg) layout, you simply redefine the base spacing variables:

<style>
  :root {
    /* Increase the height of inputs and buttons */
    --auth0-form-field-height: 50px; 
    /* Increase the padding inside elements */
    --auth0-spacing-sm: 16px;
    /* Increase the base font size */
    --auth0-font-size-base: 18px;
  }
</style>

Let me know if you have any other questions!

Kind Regards,
Nik