The <input> element
The <input>
element is used to create interactive controls for web-based forms to accept data from the user. Various types of input data and control widgets are available, depending on what use you need. The <input>
element is one of HTML's most powerful and complex. The DOM HTMLInputElement
interface provides the properties and methods for working with the options, layout, and presentation of <input>
elements.
CSS
UI pseudo-classes
<input>
element:Pseudo-class | Description |
---|---|
:enabled |
Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus. |
:disabled |
Any currently disabled element that has an enabled state, meaning it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled. |
:read-only |
Element not editable by the user |
:read-write |
Element that is editable by the user. |
:placeholder-shown |
Element that is currently displaying placeholder text,
including <input> and <textarea> elements with the placeholder attribute present that has, as yet, no value.
|
:default |
Form elements that are the default in a group of related elements. Matches checkbox and radio input types that were checked on page load or render. |
:checked |
Matches checkbox and
radio input types that
are currently checked (and the (<option> in a
<select> that is currently selected).
|
:indeterminate |
checkbox elements
whose indeterminate property is set to true by JavaScript,
radio elements, when all
radio buttons with the same name value in the form are unchecked, and
<progress> elements in an indeterminate state
|
:valid |
Form controls that can have constraint validation applied and are currently valid. |
:invalid |
Form controls that have constraint validation applied and are currently
not valid. Matches a form control whose value doesn't match the
constraints set on it by its attributes, such as
required ,
pattern ,
step and max .
|
:in-range |
A non-empty input whose current value is within the range limits
specified by the min and max attributes and the step .
|
:out-of-range |
A non-empty input whose current value is NOT within the range limits
specified by the min
and max attributes or
does not adhere to the step constraint.
|
:required |
<input> , <select> , or <textarea> element that has the required attribute set on it.
Only matches elements that can be required.
The attribute included on a non-requirable element will not make for a match.
|
:optional |
<input> , <select> , or
<textarea> element that does NOT have the required attribute set on it.
Does not match elements that can't be required.
|
:blank |
<input> and <textarea> elements that currently have no value. |
:user-invalid |
Similar to :invalid , but is activated on blur. Matches
invalid input but only after the user interaction, such as by focusing
on the control, leaving the control, or attempting to submit the form
containing the invalid control.
|
Pseudo-classes example
We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the color
and font-weight
of the <label>
that comes immediately after a checked input. We haven't applied any styles if the input
is not checked.
input:checked + label { color: red; font-weight: bold; }
Attribute selectors
It is possible to target different types of form controls based on their type
using attribute selectors. CSS attribute selectors match elements based on either just the presence of an attribute or the value of a given attribute.
/* matches a password input */ input[type="password"] { } /* matches a form control whose valid values are limited to a range of values*/ input[min][max] { } /* matches a form control with a pattern attribute */ input[pattern] { }
::placeholder
By default, the appearance of placeholder text is a translucent or light gray. The ::placeholder
pseudo-element is the input's placeholder
text. It can be styled with a limited subset of CSS properties.
::placeholder { color: blue; }
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder
in its selector.
appearance
The appearance
property enables the displaying of (almost) any element as a
platform-native style based on the operating system's theme as well as
the removal of any platform-native styling with the none
value.
You could make a <div>
look like a radio button with div {appearance: radio;}
or a radio look like a checkbox with [type="radio"] {appearance: checkbox;}
, but don't.
Setting appearance: none
removes platform native borders, but not functionality.
caret-color
A property specific to text entry-related elements is the CSS caret-color
property, which lets you set the color used to draw the text input caret:
HTML
<label for="textInput">Note the red caret:</label> <input id="textInput" class="custom" size="32" />
CSS
input.custom { caret-color: red; font: 16px "Helvetica", "Arial", "sans-serif"; }
Result
object-position and object-fit
In certain cases (typically involving non-textual inputs and specialized interfaces), the <input>
element is a replaced element. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS object-position
and object-fit
properties