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.

The default buttons and forms property values can be customized in the properties.scss document, new values added must also be included with the buttons and forms Sass map in the _maps.scss document for compiling.

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.188rem !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.188rem !default;
$input-focus:         0 0 0 0.12rem !default;
$input-focus-color:   var(--surf-4) !default;

Sass 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;

The buttons and forms styles can be customized in the _styles.scss document, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

As the contents below shows the _styles.scss document also includes the typography styles and optional extras plus the tables styles but they have not been included in the example below.

//  ------------------------------------------------------------
//  Styles
//   1. Resets 
//   2. Typography
//   3. Smooth scroll and view-transition (if enabled)
//   4. Accessibility (if enabled)
//   5. Forms and buttons (if enabled)
//   6. Tables (if enabled)
//  ------------------------------------------------------------
@use "../configuration" as *;
@use "../properties" as *;

//  ------------------------------------------------------------
//  5. Forms and buttons (if enabled)
//  ------------------------------------------------------------

@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(--accent, 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]