Código de CSS - Cambiar la aparicencia de un formulario si algun elemento obtiene el foco

Imágen de perfil
Val: 200
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cambiar la aparicencia de un formulario si algun elemento obtiene el focográfica de visualizaciones


CSS

Publicado el 18 de Septiembre del 2019 por Joan
660 visualizaciones desde el 18 de Septiembre del 2019
La pseudo clase focus-within aplica estilos a un elemento padre si algún elemento hijo obtiene el foco.
En este ejemplo se muestra el uso de focus-within en un formulario, cuando un elemento de entrada obtiene el foco dentro de un formulario.

Sin el foco
sin-el-foco

Con el foco
con-el-foco

Requerimientos

Listado de navegadores que lo soportan: https://caniuse.com/#feat=css-focus-within

1

Publicado el 18 de Septiembre del 2019gráfica de visualizaciones de la versión: 1
661 visualizaciones desde el 18 de Septiembre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    form {
        display:inline-block;
        border: 1px solid #2d98da;
        color: #000000;
        padding: 20px;
    }
    form label {
        float:left;
        margin:5px;
    }
    form input {
        float:right;
        margin:5px;
    }
 
    form:focus-within {
        background: #f7b731;
        color: #a00;
    }
    </style>
 
</head>
<body>
 
<div class="focus-within">
    <form>
        <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" /> <br />
        <label for="apellidos">Apellidos:</label><input id="apellidos" name="apellidos" type="text" />
    </form>
</div>
 
</body>
</html>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5534