CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS :focus selector

CSS :focus pseudo-class represents the element that has received focus (such as form input). It is triggered when the user clicks or touches the element or selects it with the keyboard's 'tab' key.

Complete CSS Selector Reference Manual

Online Examples

The style selected when an input field gets focus:

Example

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
input:focus
{
　　　　background-color:orange;
}
</style>
</head>
<body>
<p>Click the text input box form to see the yellow background:</p>
<form>
First name:　<input　type="text"　name="firstname"　/><br>
Last name:　<input　type="text"　name="lastname"　/>
</form>
<p><b>Notice:</b>　　:focus　acts on　IE8,DOCTYPE　must be declared</p>
</body>
</html>

Test and see ‹/›

Definition and Usage

:focus selector is used to select elements with focus.

Hint: :focus selector accepts keyboard events or other user input elements.

Browser Compatibility

The numbers in the table indicate the first browser version that supports this attribute.

selector
:focus	4.0	8.0	2.0	3.1	9.6

Note: 　:focus selector is supported in IE8must be declared<!DOCTYPE> .

CSS tutorial: CSS Pseudo-classes