-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
75 lines (49 loc) · 2.05 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
title: ":focus"
slug: Web/CSS/:focus
---
{{CSSRef}}
La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:focus`** [CSS](/es/docs/Web/CSS) representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.
```css
/* Selecciona cualquier <input> cuando se enfoca */
input:focus {
color: red;
}
```
> [!NOTE]
> Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice {{cssxref(":focus-within")}} si desea seleccionar un elemento que contenga un elemento enfocado.
## Sintaxis
{{csssyntax}}
## Ejemplo
### HTML
```html
<input
class="red-input"
value="Voy a ser de color rojo cuando enfoque." /><br />
<input class="blue-input" value="Voy a ser de color azul cuando enfoque." />
```
### CSS
```css
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
```
### Resultado
{{EmbedLiveSample('Ejemplo')}}
## Sobre Accesibilidad
Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requiere que el indicador de foco tenga un contraste de por lo menos 3:1.
- Indicadores de foco accesibles (en inglés): [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
### :focus { outline: none; }
Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.
- Más información (en inglés): [Never remove CSS outlines](https://a11yproject.com/posts/never-remove-css-outlines/)
## Especificaciones
{{Specifications}}
## Compatibilidad con navegadores
{{Compat}}
## Ver también
- {{cssxref(":focus-within")}}