Pseudo Classes For Input Elements – With Examples

There are some pseudo-class that we can use to style input elements, such as input (type: textbox, submit, button, etc..), radio button, checkbox button, and textarea.

1. :hover Pseudo-class

:hover pseudo-class active when the mouse is over the element, it can be applied to all elements including pseudo-elements, but a litte exceptions to IE 6, which only applicable to anchor element (<a>), so if you are still consider using IE 6, be careful to use this pseudo-class.

Exists in CSS 2, mean that this pseudo-class is supported by all major browsers including old IE.

2. :focus Pseudo-class

This pseudo-class active when the cursor is in the input element, neither by clicking on it or by pressing tab keys on the keyboard. For instance, in the inputbox below, click in the name section and press the tab button to switch to the address section, or press and hold the submit button, then notice the changes.



CSS Rule:

input:not([type="submit"]),
textarea
{ 
	font-size:15px;
	padding:9px;
	border:1px solid #CCCCCC;
	transition: all .3s;
} 
input:not([type="submit"]):hover,
textarea:hover {
	border-color: rgba(21,127,219,.63);
}
input:not([type="submit"]):focus,
textarea:focus { 
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
	border-color:#4ab1ff;
	background: #F5F5F5;
}
input[type="submit"]:focus {
	-moz-box-shadow:inset 0px 0px 50px -14px #000000;
	-webkit-box-shadow:inset 0px 0px 50px -14px #000000;
	box-shadow:inset 0px 0px 50px -14px #000000;
}

Exists in CSS 2.1, this pseudo-class is supported by all major browsers, while in IE it works started from version: 8+, for a complete list, please visit Mozilla Developer Network

3. :enabled Pseudo-class

:enabled pseudo-class will match all input elements that are enabled, which mean is in active (eg: can be selected (for selectbox), accept input (for inputbox), can be checked (for checkbox), etc…)), notice that this pseudo-class will override the default styles that have been previously defined, for instance, suppose we have made rule as bellow:

input {
	background-color: red;
	color: orange;
}

and then we defined new rule:

input:enabled {
	background-color: blue;
	color: yellow;
}

the input elements will have blue background rather than red.

As it was first introduced in CSS 3, this pseudo-class doesn’t supported by old browser especially IE, IE supports it from version 9+, for a complete list, please visit Mozilla Developer Network

4. :disabled Pseudo-class

:disabled pseudo-class is the opposite of :enabled pseudo-class, it will match input elements that are disabled (not active), which usually has the disabled attribute, this attribute can be written in three valid ways, for instances, <input type="url" disabled=""> <input type="url" disabled="disabled"/> (value other than disabled will be invalid), or, <input type="url" disabled/> The following example compares the use of :enabled and :disabled pseudo-class




Disabled:


Same as :enabled, this selector was also first introduced in CSS3, so it doesn’t supported by old IE browsers, IE support it from version 9+, for a complete list, please visit Mozilla Developer Network

5. :checked Pseudo-class

:checked pseudo-class is used for the input elements (only checkbox and radio) that are in the checked state, this state can be acheived both by clicking on the element, or defining the checked attribute directly to the element. To see how this pseudo-class work, please click on the following radio or checkbox buttons:



Checkbox



CSS Rule

label {
	cursor: pointer;
    display: inline-block;
    line-height: 30px;
	vertical-align: middle;
}
input:enabled:hover {
	border-color: rgba(21,127,219,.63);
}
input:enabled:focus {
	background: #F5F5F5;
	border-color: #4ab1ff;
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
}
input[type=radio],
input[type=checkbox] {
	background: #fff;
    border: 1px solid #b4b9be;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	float:left;
	outline: 0;
	padding: 0!important;
	height: 20px;
	width: 20px;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    -webkit-transition: .05s border-color ease-in-out;
	transition: .05s border-color ease-in-out;
}
input[type=radio] {
	border-radius: 50%;
}
input[type=radio]:checked:before,
input[type=checkbox]:checked:before {
	background-color: #1e8cbe;
	content: "";
	float: left;
	height: 10px;
    width: 10px;
    margin: 4px;
    speak: none;
}
input[type=radio]:checked:before {
    border-radius: 50px;
	-webkit-border-radius: 50px;
}

This selector is group of CSS3 selector, so old IE browsers do not support it, IE supports it started from version 9+, for a complete list, please visit Mozilla Developer Network

6. :required, :valid, and :invalid Pseudo-class

These pseudo class is associated with HTML 5 form validation.

:required Pseudo-class

:required pseudo-class allows us to apply a style to each input elements which has a required attribute, this attribute was introduced in HTML 5. According to the W3C standards, the value of this attribute can be charged anything (eg: required="true" or required=""), and this is valid. :required can be applied to all input elements including radio and checkboxes.

:valid and :invalid Pseudo-class

:valid and :invalid pseudo-class that are introduced in CSS3 are associated with :required pseudo class. For instance: when submitting a form which has some input fields that have :required attribute, and not be filled, will be arises :invalid pseudo-class. In addition, the :valid and :invalid  pseudo-class also be used in conjunction with input validation using HTML 5, such as url and email validation, for instance: when submitting a form that has input field with type=”url” and the url value is invalid, then :invalid pseudo-class will be triggered, otherwise :valid pseudo-class arise.

Example of using HTML 5 validation with CSS 3

In the following example, all fields are mandatory (required) marked with an asterisk symbol, email and url fields are using native HTML 5 validation, while submitting the form and there is an empty field, or wrong pattern for url or email, than a cross sign will appears on the right side of the input (:invalid pseudo-class), otherwise, it will display a green check mark (:valid pseudo-class).

HTML

<form class="form-validation" action="" method="post">
	<label>Nama</label><input name="nama" required="" type="text" /><i></i>
	<label>Email<sup>*</sup></label><input name="email" required="" type="email" /><i></i>
	<label>Url</label><input name="url" required="" type="url" /><i></i>
	<label>Gender *</label><label><input name="gender" required="" type="radio" value="male" />Male</label>
	<label><input name="gender" required="" type="radio" value="female" />Female</label>
	<label></label><input class="button" name="submit" type="submit" value="Submit" />
</form>

CSS Rule

.form-validation label {
	display: inline-block;
	width:100px;
}
.form-validation p {
	margin: 0;
}
.form-validation i {
	font-size: 20px;
	margin-left: 5px;
}
.form-validation input:focus:invalid + i::after {
	color: #FF4343;
	content: "\f057";
}
.form-validation input:valid + i::after {
	color: #18CA3F;
	content: "\f058";	
}
.form-validation i
{
	font-family: 'icomoon' !important;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
}
.form-validation input
{ 
	border: 1px solid #CCCCCC;
	display: inline-block;
    font-size: 15px;
    padding: 7px 9px;
    margin: 0;
	transition: all .3s;
} 
.form-validation input:hover {
	border-color: rgba(21,127,219,.63);
} 
.form-validation input:focus {
	box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
	border-color: rgba(21,127,219,.63);
	background-color: #FEFFFA;
	outline: none;
}

These three selectors are also group of CSS3 selector, so old IE browsers do not support it, IE supports it started from version 9+, for a complete list, please visit Mozilla Developer Network, section: :valid, :invalid, :required

7. :read-only dan :read-write Pseudo-class

Based on W3C specification, :read-write pseudo class are used to select element:

  • Input elements that can be applied read-only attribute, but do not have readonly attibute and do not disabled.
  • Textareas that do not have the readonly attribute and do not disabled.
  • Other elements other than input and textarea that can be edited (have contenteditable attribute).

example:

:read-write {
	cursor: text;
	border: 1px solid green;
	padding: 10px;
}

are applied to these elements:

<!-- :read-write input element that do not have readonly attribute and do not disabled -->
<input type="text" name="name" value="John"/>

<!-- :read-write textarea that do not have readonly attribute and do not disabled -->
<textarea name="name" value="John"/>Sample read-write textarea</textarea>

<!-- :read-write other elements (div) that have contenteditable attribute -->
<div contenteditable>Content Editable DIV</div>

Not All modern browsers support this pseudo-class, some browsers, that are Chrome and Microsoft Edge support this pseudo-class, while not for some others, such as Firefox (until version 43), Android, Internet Explorer version <= 11.

The :read-only pseudo class should match all elements that are not writeable, as stated in W3C Specification. My guess is it will match all elements that have read-only attribute or contenteditable attribute, but, in fact it match elements that have contenteditable attribute, so elements with contenteditable attribute will match both :read-write and :read-write pseudo class, strange enough!.

Conclusion

The use of pseudo class can improve the user experience and can make our work easier, especially we don’t need to write some classes to the elements, today, pseudo-classes have many functionality, including styles for input validation, however there are some pseudo class such as :read-only and :read-write that are not supported by some browsers, so we had to go back to the conventional way that is back to write some classes.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

2 Responses

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social