Gerillass
v2.1.0Type: 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, active, 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.
@include all-text-inputs {
background-color: #e6e6e6;
}[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.
@include all-text-inputs(hover) {
background-color: orange;
}[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.
@include all-text-inputs(focus) {
background-color: green;
}[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.
.element {
@include all-text-inputs(active) {
background-color: green;
color: white;
};
}.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.
.element {
@include all-text-inputs(invalid) {
background-color: red;
color: white;
};
}.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
Now let's try it with the :required pseudo-class selector applied.
.element {
@include all-text-inputs(required) {
background-color: orange;
color: white;
};
}.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.
.element {
@include all-text-inputs(disabled) {
background-color: gray;
color: black;
};
}.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.
.containing-element {
@include all-text-inputs {
background-color: green;
}
}.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