61 lines
1.1 KiB
Markdown
61 lines
1.1 KiB
Markdown
|
---
|
||
|
|
title: Focus
|
||
|
|
---
|
||
|
|
## Focus
|
||
|
|
|
||
|
|
### Definition
|
||
|
|
|
||
|
|
The `:focus` represents an element that has received a focus state, triggered by an event from the keyboard. Trigger action comes from pressing the **TAB** key, which visually create a ring around an element.
|
||
|
|
|
||
|
|
### Syntax
|
||
|
|
|
||
|
|
`:focus`
|
||
|
|
|
||
|
|
### Example
|
||
|
|
|
||
|
|
```
|
||
|
|
a:focus {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Output
|
||
|
|
[JSfiddle Link](https://jsfiddle.net/ejae7vb3/1/)
|
||
|
|
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
[MDN - Mozilla Developers Network | :focus - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
|
||
|
|
|
||
|
|
The :focus CSS pseudo-class is used to select the element that has focus (such as a form input).
|
||
|
|
|
||
|
|
It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.
|
||
|
|
|
||
|
|
Syntax:
|
||
|
|
|
||
|
|
```css
|
||
|
|
:focus
|
||
|
|
```
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
HTML:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<form>
|
||
|
|
<input type="text" value="The background will turn yellow when you click on it.">
|
||
|
|
</form>
|
||
|
|
```
|
||
|
|
|
||
|
|
CSS:
|
||
|
|
|
||
|
|
```css
|
||
|
|
input:focus {
|
||
|
|
background-color: yellow;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
For more information visit [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
|
||
|
|
|
||
|
|
[W3.org | CSS Documentation](https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes)
|