Base Forms

This modules sets structural styles for base form elements, creating a consistent visual rhythm among forms while allowing for color to be adjusted where needed. These styles do not rely on markup structure and can be combined with utilities to make fine-grained, contextual adjustments. Form element styles are intended to be interoperable with all other utility styles.

Inline Forms

By default, form elements follow browser defaults and display inline. Note: the .field style is part of basscss-color-forms.

<form>
  <label for="search">Search</label>
  <input id="search" type="text" class="field">
  <button class="btn btn-primary">Go</button>
</form>

Stacked Forms

Use .block, .col-12, and other layout utilities to stack form elements and adjust margins.

<form class="sm-col-6">
  <label>Email Address</label>
  <input type="text" class="block col-12 mb1 field">
  <label>Password</label>
  <input type="password" class="block col-12 mb1 field">
  <label>Select</label>
  <select class="block col-12 mb1 field">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <label class="block col-12 mb2">
    <input type="checkbox" checked>
    Remember me
  </label>
  <button type="submit" class="btn btn-primary">Sign In</button>
  <button type="reset" class="btn btn-primary black bg-gray">Cancel</button>
</form>

To adjust the color of forms, use the styles in basscss-color-forms and basscss-color-forms-dark.

CSS Source

input,
select,
textarea,
fieldset {
  font-family: var(--form-field-font-family);
  font-size: var(--form-field-font-size);
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}

label {
  vertical-align: middle;
}

input[type=text],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  height: var(--form-field-height);
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
  vertical-align: middle;
  -webkit-appearance: none;
}

select {
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

select:not([multiple]) {
  height: var(--form-field-height);
  vertical-align: middle;
}

textarea {
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

9 Rules

24 Selectors

76 Declarations

64 Properties

Base Reset

Base Tables