CSS Selector - Using the :focus Selector
:focus selects elements with focus.
:focus is a Pseudo-class and it
applies to An element that has focus.
:focus applies to an element during the time in which it has focus.
One example is an input box that has the text-input cursor within it.
Other elements, such as hyperlinks, can also have focus.
Examples:
a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}
Summary
- CSS Version
- 2
CSS Syntax
:focus {
style properties
}
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
:focus |
Yes | 8.0 | Yes | Yes | Yes |
Example
The following code uses the :focus Selector.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
:focus {<!--from ww w. j a v a 2s . c om-->
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<form>
Name: <input type="text" name="name" />
<p />
City: <input type="text" name="city" />
<p />
<input type="submit" />
</form>
</body>
</html>