This module sets basic color styles for form elements on a light background.

Input Fields

To style the color, background, and border styles for form fields, use the .field style. This style works on text inputs, selects, and textareas.

<label>Input</label>
<input type="text" class="block col-12 field">
<label>Select</label>
<select class="block col-12 field">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<label>Textarea</label>
<textarea class="block col-12 field"></textarea>

The .field style includes states for disabled and read-only fields, as well as success, warning, and error states.

<label>Normal</label>
<input type="text" class="block col-12 field">
<label>Disabled</label>
<input type="text" class="block col-12 field" disabled value="This is disabled">
<label>Read Only</label>
<input type="text" class="block col-12 field" readonly value="This is read-only">
<label>Required</label>
<input type="text" class="block col-12 field" required>
<label>.is-focused</label>
<input type="text" class="block col-12 field is-focused">
<label>.is-disabled</label>
<input type="text" class="block col-12 field is-disabled">
<label>.is-read-only</label>
<input type="text" class="block col-12 field is-read-only">
<label>Success</label>
<input type="text" class="block col-12 field is-success">
<label>Warning</label>
<input type="text" class="block col-12 field is-warning">
<label>Error</label>
<input type="text" class="block col-12 field is-error">

CSS Source

.field {
  border-style: solid;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

.field:focus,
.field.is-focused {
  outline: none;
  border-color: var(--field-focus-color);
  box-shadow: 0 0 0 2px color(var(--field-focus-color) a(.5));
}

.field:disabled,
.field.is-disabled {
  background-color: var(--darken-2);
  opacity: .5;
}

.field:read-only:not(select),
.field.is-read-only {
  background-color: var(--darken-2);
}


.field.is-success {
  border-color: var(--field-success-color);
}

.field.is-success:focus,
.field.is-success.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-success-color) a(.5));
}

.field.is-warning {
  border-color: var(--field-warning-color);
}

.field.is-warning:focus,
.field.is-warning.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-warning-color) a(.5));
}

.field:invalid,
.field.is-error {
  border-color: var(--field-error-color);
}

.field:invalid:focus,
.field:invalid.is-focused,
.field.is-error:focus,
.field.is-error.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-error-color) a(.5));
}

13 Rules
22 Selectors
75 Declarations
64 Properties