Gerillass: All Text Inputs Sass Mixin

All Text Inputs

Type: Mixin

@include all-text-inputs();

* You can call mixins with or without the gls- namespace (e.g. @include gls-all-text-inputs();).

The All Text Inputs Sass mixin helps you target all the text-based HTML input elements in the DOM, so you can easily apply your style rules.

Arguments

Name	Type	Description
`$pseudo`	string	Sets the pseudo-class selector for the selected text-based input elements. Accepts the values `hover`, `focus`, `focus-visible`, `active`, `invalid`, `user-invalid`, `required`, and `disabled`.

You can call the mixin at the root level of your stylesheet to target all the text-based input elements in the DOM, or call it inside a selector to target only the elements that are children of that selector.

Examples

Simply call the mixin at the root level of your stylesheet to target all the text-based input elements.

Sass

@include all-text-inputs {
  background-color: #e6e6e6;
}

CSS

[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], input:not([type]), textarea {
  background-color: #e6e6e6;
}

Result

Let's target all the text-based HTML inputs with the :hover pseudo-class selector applied.

Sass

@include all-text-inputs(hover) {
  background-color: orange;
}

CSS

[type=color]:hover, [type=date]:hover, [type=datetime]:hover, [type=datetime-local]:hover, [type=email]:hover, [type=month]:hover, [type=number]:hover, [type=password]:hover, [type=search]:hover, [type=tel]:hover, [type=text]:hover, [type=time]:hover, [type=url]:hover, [type=week]:hover, input:not([type]):hover, textarea:hover {
  background-color: orange;
}

Result

Let's target all the text-based HTML inputs with the :focus pseudo-class selector applied.

Sass

@include all-text-inputs(focus) {
  background-color: green;
}

CSS

[type=color]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:not([type]):focus, textarea:focus {
  background-color: green;
}

Result

Now let's target all the text-based HTML inputs with the :active pseudo-class selector applied.

Sass

.element {
  @include all-text-inputs(active) {
    background-color: green;
    color: white;
  };
}

CSS

.element [type=color]:active, .element [type=date]:active, .element [type=datetime]:active, .element [type=datetime-local]:active, .element [type=email]:active, .element [type=month]:active, .element [type=number]:active, .element [type=password]:active, .element [type=search]:active, .element [type=tel]:active, .element [type=text]:active, .element [type=time]:active, .element [type=url]:active, .element [type=week]:active, .element input:not([type]):active, .element textarea:active {
  background-color: green;
  color: white;
}

Result

Now let's target all the text-based HTML inputs with the :invalid pseudo-class selector applied.

Sass

.element {
  @include all-text-inputs(invalid) {
    background-color: red;
    color: white;
  };
}

CSS

.element [type=color]:invalid, .element [type=date]:invalid, .element [type=datetime]:invalid, .element [type=datetime-local]:invalid, .element [type=email]:invalid, .element [type=month]:invalid, .element [type=number]:invalid, .element [type=password]:invalid, .element [type=search]:invalid, .element [type=tel]:invalid, .element [type=text]:invalid, .element [type=time]:invalid, .element [type=url]:invalid, .element [type=week]:invalid, .element input:not([type]):invalid, .element textarea:invalid {
  background-color: red;
  color: white;
}

Result

:invalid marks an empty required field as an error before anyone has typed. Measured in Chrome 152: on page load an empty required field already matches :invalid, so an error style shows up on a form nobody has touched. :user-invalid waits for the user. It did not match on load, nor after focusing the field and leaving it empty. An email field with abc typed in matched only once the field was left, and pressing Submit made an untouched empty required field match. For error styles, prefer user-invalid.

The same error style with :user-invalid. Nothing is marked while the fields are untouched. Type something that is not an email address into the field, then click outside it.

Sass

.element {
  @include all-text-inputs(user-invalid) {
    border-color: crimson;
    background-color: #fff5f5;
  };
}

CSS

.element [type=color]:user-invalid, .element [type=date]:user-invalid, .element [type=datetime]:user-invalid, .element [type=datetime-local]:user-invalid, .element [type=email]:user-invalid, .element [type=month]:user-invalid, .element [type=number]:user-invalid, .element [type=password]:user-invalid, .element [type=search]:user-invalid, .element [type=tel]:user-invalid, .element [type=text]:user-invalid, .element [type=time]:user-invalid, .element [type=url]:user-invalid, .element [type=week]:user-invalid, .element input:not([type]):user-invalid, .element textarea:user-invalid {
  border-color: crimson;
  background-color: #fff5f5;
}

Result

Now let's try it with the :required pseudo-class selector applied.

Sass

.element {
  @include all-text-inputs(required) {
    background-color: orange;
    color: white;
  };
}

CSS

.element [type=color]:required, .element [type=date]:required, .element [type=datetime]:required, .element [type=datetime-local]:required, .element [type=email]:required, .element [type=month]:required, .element [type=number]:required, .element [type=password]:required, .element [type=search]:required, .element [type=tel]:required, .element [type=text]:required, .element [type=time]:required, .element [type=url]:required, .element [type=week]:required, .element input:not([type]):required, .element textarea:required {
  background-color: orange;
  color: white;
}

Result

Now let's try it with the :disabled pseudo-class selector applied.

Sass

.element {
  @include all-text-inputs(disabled) {
    background-color: gray;
    color: black;
  };
}

CSS

.element [type=color]:disabled, .element [type=date]:disabled, .element [type=datetime]:disabled, .element [type=datetime-local]:disabled, .element [type=email]:disabled, .element [type=month]:disabled, .element [type=number]:disabled, .element [type=password]:disabled, .element [type=search]:disabled, .element [type=tel]:disabled, .element [type=text]:disabled, .element [type=time]:disabled, .element [type=url]:disabled, .element [type=week]:disabled, .element input:not([type]):disabled, .element textarea:disabled {
  background-color: gray;
  color: black;
}

Result

Call the mixin inside a selector to target only the text-based input elements inside that selector.

Sass

.containing-element {
  @include all-text-inputs {
    background-color: green;
  }
}

CSS

.containing-element [type=color], .containing-element [type=date], .containing-element [type=datetime], .containing-element [type=datetime-local], .containing-element [type=email], .containing-element [type=month], .containing-element [type=number], .containing-element [type=password], .containing-element [type=search], .containing-element [type=tel], .containing-element [type=text], .containing-element [type=time], .containing-element [type=url], .containing-element [type=week], .containing-element input:not([type]), .containing-element textarea {
  background-color: green;
}

Result

All Text Inputs

Arguments

Examples

Related Links