CSS input pseudo classes
CSS input pseudo classes select input elements based on some state or attribute of the input element. For example, we can select and apply CSS properties on all the input elements in a page that are disabled.
The following is the list of input classes.
1. :disabled
:disabled pseudo class selects all the input elements that are disabled.
Example
<style>
input:disabled{
background-color:gray;
}
</style>
Try </>
It means the background-color of all the disabled input elements is gray.
2. :enabled
:enabled input pseudo class selects all the input elements that are not disabled. All the input elements are enabled by default.
Example
<style>
input:enabled{
border-radius:2px;
border:none;
outline:none;
}
</style>
Try </>
The above CSS properties are applied to all of the enabled input elements.
3. :checked
:checked input pseudo class selects the radio buttons or checkboxes that are already checked.
Example
<style>
input:checked{
width:20px;
height:20px;
}
</style>
Try </>
4. :read-only
:read-only input pseudo class is for the input elements where text can be read only and can not be changed.
Example
<style>
input:read-only{
background-color:gray;
}
</style>
Try </>
The background-color color of input field is gray that has readonly attribue.
5. :placeholder-shown
:placeholder-shown is for the input elements that have placeholder attribue to hint the user about what kind of data is to be entered.
Example
<style>
input:placeholder-shown{
font-size:20px;
}
</style>
Try </>
The font-size of the placeholder text is 20px for the input element.
6. :out-of-range
Range is specified by min and max values. And if a user enters data out of this range, then this pseudo class is selected.
Example
<style>
input:out-of-range{
color:red;
}
</style>
Try </>
If the value is out of range, the color of text becomes red.
7. :required
It is for those input elements that require information necessarily otherwise the form is not submitted.
Example
<style>
input:required{
box-shadow:3px 3px 5x rgba(200,200,200,0.5);
}
</style>
Try </>
The color of the text is gray for the input element that requires data necessarily.
Was this article helpful?
