Buttons and forms

Consistently styled standard HTML buttons and forms provide a customizable baseline for generic form design and can be customized using root level and/or element-specific CSS variables either globally or inline.

Buttons (anchor)

Although a utility, the .btn class is included with the default button styles for use links that require button styling but don't require any other button attributes.

.btn

File upload

The optional button utilities include some basic size and color modifier classes for customizing the button styles.

Forms (anchor)

The field input labels below are included for screen-readers only using the .vis-hidden utility included with the typography styles. The <fieldset> element is contained using inline flex for the following example, without this (by default) it will fill the space available to it.

Text:

Email:

Telephone

URL:

Text area

Select list

Option group

Datalist

Numbers

Password

Time

Week

Month

Date

Date and time local

Customizing (anchor)

Enabled in the default Themalize configuration, the buttons and forms styles are optional and can be disabled if not required with $enable-forms-buttons: false; in the configuration.scss document.

Property values (anchor)

The default buttons and forms property values are defined from Sass variables that can be customized in the properties.scss document (or via overrides) when compiling as described on the setup and configuration page.

Properties

$lh-btn-forms:        1.4 !default;
$btn-py:              0.313rem !default;
$btn-px:              0.75rem !default;
$btn-bg:              var(--surf-1) !default;
$btn-hover:           var(--surf-2) !default;
$btn-bd-width:        1px !default;
$btn-bd-color:        var(--surf-2) !default;
$btn-radius:          0.125em !default;
$form-py:             0.313rem !default;
$form-px:             0.75rem !default;
$form-bg:             var(--body-bg) !default;
$form-bd-width:       1px !default;
$form-bd-color:       var(--surf-3) !default;
$form-radius:         0.125em !default;
$input-focus:         0 0 0 0.12rem !default;
$input-focus-color:   var(--surf-4) !default;

The property values are compiled as CSS variables which are then used to apply the styles, these can also be edited directly in the style sheet if required and/or used to customize styles inline.

CSS variables

:where(html) {
  --lh-btn-forms: 1.4;
  --btn-py: 0.313rem;
  --btn-px: 0.75rem;
  --btn-bg: var(--surf-1);
  --btn-hover: var(--surf-2);
  --btn-bd-width: 1px;
  --btn-bd-color: var(--surf-3);
  --btn-radius: 0.125em;
  --form-py: 0.313rem;
  --form-px: 0.75rem;
  --form-bg: var(--body-bg);
  --form-bd-width: 1px;
  --form-bd-color: var(--surf-3);
  --form-radius: 0.125em;
  --input-focus: 0 0 0 0.12rem;
  --input-focus-color: var(--surf-4);
}

New values can be added to the Sass properties above if required but for compiling must also be included with the buttons and forms Sass map in the _maps.scss document.

Buttons and form map

$forms-buttons: (
  "lh-btn-forms": #{$lh-btn-forms},
  "btn-py": #{$btn-py},
  "btn-px": #{$btn-px},
  "btn-bg": #{$btn-bg},
  "btn-hover": #{$btn-hover},
  "btn-bd-width": #{$btn-bd-width},
  "btn-bd-color": #{$btn-bd-color},
  "btn-radius": #{$btn-radius},
  "form-py": #{$form-py},
  "form-px": #{$form-px},
  "form-bg": #{$form-bg},
  "form-bd-width": #{$form-bd-width},
  "form-bd-color": #{$form-bd-color},
  "form-radius": #{$form-radius},
  "input-focus": #{$input-focus},
  "input-focus-color": #{$input-focus-color},
) !default;

Styles (anchor)

The buttons and forms styles can be customized in the _styles.scss document. Sass @if rules wrap the styles to control compiling via settings in the configuration.scss document, but apart from that they're written as standard CSS using :where() for 0 specificity and grouping common elements together.

Styles

@if $enable-forms-buttons {

:where(input, button, select, optgroup, textarea, .btn),
::file-selector-button {
  --color: inherit;
  --fs: inherit;
  --lh: var(--lh-btn-forms);
  @if $enable-icon-mixins or $enable-icon-styles {
  --ico: var(--color);  
  }
  color: var(--color);
  font-size: var(--fs);
  font-family: inherit;
  line-height: var(--lh);
  vertical-align: middle;
}

:where(button, [type=button], [type=submit], [type=reset], .btn),
::file-selector-button {
  padding-block: var(--btn-py);
  padding-inline: var(--btn-px);
  background-color: var(--btn-bg); 
  border: var(--btn-bd-width) solid var(--btn-bd-color);
  border-radius: var(--btn-radius);
  -webkit-appearance: button;
}

:where(select, optgroup, textarea, input:not([type=button], [type=submit], [type=reset])) {
  padding-block: var(--form-py);
  padding-inline: var(--form-px);
  background-color: var(--form-bg); 
  border: var(--form-bd-width) solid var(--form-bd-color);
  border-radius: var(--form-radius);
}

:where(input, button, select, optgroup, textarea):disabled,
:where([aria-disabled=true]) {
  opacity: 0.65;
  pointer-events: none;
}

:where(button, select, optgroup, [type=button], [type=submit], [type=reset]),
::file-selector-button {
  cursor: pointer;
}

:where([type="file"]) {
  --form-bg: transparent;
  --form-py: 0;
  --form-px: 0;
  border: none;
}

::file-selector-button {
  margin-inline-end: .5rem;
}

:where(.btn) {
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

:where(.btn):is(:hover,:focus, :active) {
  --color: inherit;
}

:where(input, button, select, optgroup, textarea, .btn):focus {
  outline: none;
  box-shadow: var(--input-focus) var(--input-focus-color);
}

:where(input, button, select, optgroup, textarea, .btn):focus:not(:focus-visible) {
  box-shadow: none;
}

:where(button, [type=button], [type=submit], [type=reset], .btn):is(:hover, :focus) { 
  border-color: var(--btn-hover); 
  background-color: var(--btn-hover);
}

:where(button, [type=button], [type=submit], [type=reset], .btn):focus:not(:focus-visible) {  
  background-color: var(--btn-bg);
}
  
:where(button, [type=button], [type=submit], [type=reset], .btn):focus:not(:focus-visible):hover,
::file-selector-button:hover {
  background-color: var(--btn-hover);
}

@if $enable-primary-colors {
:where([type=submit]) {
  --color: #fff;
  --btn-bg: var(--blue);  
  --btn-hover: var(--blue-light);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--blue-dark);
}

:where([type=reset]) {
  --color: #fff;
  --btn-bg: var(--red);
  --btn-hover: var(--red-light);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: var(--red-dark);
}

} // END [if/primary-colors]
@else {

:where([type=submit]) {
  --color: #fff;
  --btn-bg: #{$blue};  
  --btn-hover: color-mix(in srgb, var(--btn-bg) 93%, white);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: color-mix(in srgb, var(--btn-bg) 90%, black);
}

:where([type=reset]) {
  --color: #fff;
  --btn-bg: #{$red};
  --btn-hover: color-mix(in srgb, var(--btn-bg) 93%, white);
  --btn-bd-color: var(--btn-bg);
  --input-focus-color: color-mix(in srgb, var(--btn-bg) 90%, black);
}

} // END [else]

:where(textarea) {
  display: block;
  resize: vertical;
}

::-webkit-input-placeholder {
  color: var(--color);
  opacity: .5;
}

:where([type=radio], [type=checkbox], [type=range], [progress]) {
  accent-color: var(--link);
}

:where([type="checkbox"], [type="radio"]) {
  block-size: var(--fs);
  inline-size: var(--fs);
}

:where([type="checkbox"], [type="radio"]):has(+ label) {
  margin-block-start: -.22rem;
  margin-inline-end: .2rem;
}

:where(select) {
  word-wrap: normal;
}

:where(fieldset, legend) {
  border: var(--form-bd-width) solid var(--form-bd-color);
  border-radius: .125em;
}

:where(fieldset) {
  margin-block-end: 1.25rem;
  padding-inline: 1.25rem;  
}

:where(legend) {
  margin-block-end: .25rem;
  padding-block: var(--form-py);
  padding-inline: .75rem;
  background-color: var(--btn-bg);
}

:where([type=color]) {
  cursor: pointer;
  padding: 0;
}

:where(input[type=color])::-webkit-color-swatch-wrapper {
  padding: 0;
}

:where(input[type=color i])::-webkit-color-swatch {
  border-color: var(--form-bd-color);
}

:where(input):autofill,
:where(input):-webkit-autofill {
  border: var(--form-bd-width) solid var(--form-bd-color);
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1.5rem var(--form-bg) inset;
}

} // END [if/forms-buttons]

To keep element-specific styles together in a single file for customizing the _styles.scss document also includes the CSS for the typography and tables styles.