Form input height

Goals:

• Consistent height of horizontally align form inputs
• Consistently adjust the size of form inputs in a certain context

Technology

Considerations:

• Defining a CSS selector for text inputs that does not match non-text inputs such as input[type=radio] and input[type=checkbox]. We could maintain a list of all acceptable type attribute values, or of all type attributes that must be ignored. Another solution would be to require using a CSS class name on form input elements.
• How does this relate to multi-line form inputs, such as a <select multiple> and <textarea>? No effect, or influence the minimum height?
• Should it influence the height of <label>?

Example

:root {
  --nih-form-input-height: 2em;
}

input[type="text"],
input[type="search"],
input[type="password"] {
  height: var(--nih-form-input-height);
}

Default height

Double height

Inside navigation

nav {
  --example-nav-height: 72px;
  height: var(--example-nav-height);

  background-color: navy;
  color: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-start: 16px;
  padding-inline-end: 16px;

  --nih-form-input-height: calc(calc(2 / 3) * var(--example-nav-height));
}