28172 sujets

CSS et mise en forme, CSS3

Focus-within et ciblage

Salut,

J'ai un problème avec la pseudo-classe focus-within : je souhaite m'en servir pour mettre en avant le formulaire courant (cf article Grab your user's attention with the :focus-within CSS selector).
TLDR : Si un élément gagne le focus dans la page, on le met en avant en affichant un pseudo-élément semi-opaque par-dessus le reste de la page, et on joue sur le z-index de l'élément qui a le focus (ou son parent) pour le mettre en avant. Typiquement : tu as un fond noir translucide partout sauf sur le formulaire courant.
Mais si on base le focus-within sur le body, tout élément gagnant le focus ferait apparaître le fond en question, et ce "tout élément" inclut les liens. Or, je ne veux appliquer cette technique qu'aux formulaires.
Quelqu'un aurait-il une idée pour que ce focus-within ne s'applique que lorsque le focus provient d'un formulaire ?

Merci
Je viens de penser à cette technique, mais je trouve ça assez "cochon" d'utiliser un sélecteur universel pour ça.
form:focus-within {
    position: relative;
    z-index: 2;
    background: #fff;
}
form:focus-within::before {
    content: '';
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
}
form:focus-within::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
}
form:focus-within > * {
    position: relative;
    z-index: 3;
}
Modérateur
Salut !

Première idée passer par un wrapper autour de ton form pour le focus-within comme ca tu peux cible de form directement et pas besoin de ::after pour le fond blanc :
formwrapper:focus-within > form {
    position: relative;
    z-index: 3;
}


Autre piste de reflexion, pourquoi passer par un ::before et pas juste pas un box-shadow ?
form:focus-within {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
}

https://jsfiddle.net/undless/3d8nLbyc/

[EDIT1]Merci pour la redécouverte c'est une feature très cool que j'avais complètement zappé[/EDIT1]

[EDIT2]En relisant plus précisément l'article j'avais pas vu que la solution du box shadow était déjà proposée dans les commentaires. C'est pour moi une meilleure solution mais ca dépend de chacun.[/EDIT2]
Modifié par _laurent (20 Nov 2020 - 10:40)
Meilleure solution
J'avais testé la piste du box-shadow, mais j'avais oublié le position relative, d'où certains éléments qui passaient par-dessus l'ombre. Et j'ai mis la taille de l'ombre à 100vmax.
Avec le position relative, ça m'a l'air nickel.

Merci
Sujet clos
Aller à