Mettre un style a un autre element quand on focus un input

CSS FOCUS

Le problème exposé dans ce sujet a été résolu.

Bonjour,

C’est la première fois que je poste ici, en esperant avoir de l’aide merci d’avance en tout cas !

Mon problème est simple a prioris ! Voilà j’essaye de recoder le page d’accueil de twitter mais je n’arrive pas a faire l’animation que nous produit twitter lorsqu’on clique sur le <input> du formulaire avec le texte qui se deplace etc… si vous voulez voir je vous invite a regarder sa.

Alors j’ai pris une page html vierge et j’ai tester ceci : 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <input type="text">
    </body  
</html>

Cette page, très simple mets juste une balise input et lorsque je focus dedans je veux que le background-color du body devient rouge par exemple j’ai donc fait ce code css la : 

input:focus body
{
    background-color: red;
}

et ceci ne fonctionne pas aurez vous une idée du pourquoi du comment ?

+0 -0

Bonjour,

CSS ne permet de cibler que des élément descendants dans un même sélecteur, pas de remonter le DOM (input étant ici un enfant/descendant de body et non l’inverse).

Je ne vois pas trop de quelle animation il s’agit de répliquer, autrement… 🤔

viki53

Ah oki, c’est pour sa que sa marche quand on veut faire un menu de navigation ou lorsqu’on survole une li on peut hidden ou faire réappartaitre pour une liste déroulante ! J’apprend un truc la !

Avec cette info je vois comment je peut faire merci ! Sinon j’essaye de faire cette animation la :

https://gifyu.com/image/fMmZ

+0 -0

Si l’idée c’est la bordure, ils utilisent box-shadow (mais border aurait un rendu similaire) sur le label qui entoure l'input.

Si c’est pour déplacer le texte, ils jouent sur la position du texte dans le label.

Leur HTML n’est pas des plus propres, et il y a du JavaScript rajouté un peu partout (parfois sans grand intérêt), donc la structure est pas forcément à copier telle-quelle, mais l’idée fonctionne.

+1 -0

Hello, ils ont probablement intégré le TextField de Material-UI.

Voici un exemple en pure CSS : https://codepen.io/Yarflam/pen/QWGXMgZ

div.loginField
  input(placeholder=(" "))
  label Username or Email

.loginField {
  position: relative; /* required */
  display: inline-block; /* required */
  border-radius: 3px;
  font-family: 'Ubuntu', 'Roboto', 'Arial';
  font-size: 1em;
}

.loginField > input {
  position: relative; /* required */
  background-color: rgba(0,0,0,0);
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 15px 10px 10px 10px; /* required */
  outline: 0;
  transition: all 0.3s ease;
  z-index: 2; /* required */
}

.loginField > input:focus {
  border-color: rgba(0, 0, 100, 0.8);
}

.loginField > label {
  position: absolute; /* required */
  top: 14px; /* required */
  left: 12px; /* required */
  transition: all 0.3s ease;
}

.loginField > input:focus + label, /* required */
.loginField > input:not(:placeholder-shown) + label { /* required */
  top: 5px; /* required */
  left: 5px; /* required */
  font-size: 0.6em; /* required */
  color: #333;
}

J’ai indiqué par des required les attributs importants pour donner cet effet. Le reste c’est de l’esthétisme.

+1 -0

Hello, ils ont probablement intégré le TextField de Material-UI.

Voici un exemple en pure CSS : https://codepen.io/Yarflam/pen/QWGXMgZ

div.loginField
  input(placeholder=(" "))
  label Username or Email

.loginField {
  position: relative; /* required */
  display: inline-block; /* required */
  border-radius: 3px;
  font-family: 'Ubuntu', 'Roboto', 'Arial';
  font-size: 1em;
}

.loginField > input {
  position: relative; /* required */
  background-color: rgba(0,0,0,0);
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 15px 10px 10px 10px; /* required */
  outline: 0;
  transition: all 0.3s ease;
  z-index: 2; /* required */
}

.loginField > input:focus {
  border-color: rgba(0, 0, 100, 0.8);
}

.loginField > label {
  position: absolute; /* required */
  top: 14px; /* required */
  left: 12px; /* required */
  transition: all 0.3s ease;
}

.loginField > input:focus + label, /* required */
.loginField > input:not(:placeholder-shown) + label { /* required */
  top: 5px; /* required */
  left: 5px; /* required */
  font-size: 0.6em; /* required */
  color: #333;
}

J’ai indiqué par des required les attributs importants pour donner cet effet. Le reste c’est de l’esthétisme.

Yarflam

Cimer, elle est bien ta solution, j’avais finalement reussir a faire mais j’ai du sortir du JS pour le faire :/

+0 -0

Cimer, elle est bien ta solution, j’avais finalement reussir a faire mais j’ai du sortir du JS pour le faire :/

biczosamuelpro

À noter que tout le monde n’active pas le JS, ou que le support n’est pas partout le même… ou que le fichier peut n’être tout simplement pas chargé. Une solution CSS propre est souvent préférable à du JS.

+0 -0

À noter que tout le monde n’active pas le JS, ou que le support n’est pas partout le même… ou que le fichier peut n’être tout simplement pas chargé. Une solution CSS propre est souvent préférable à du JS.

viki53
  • Tout le monde n’active pas le JS : Pratique pour les sites réalisés avec des frameworks JS … J’ai envie de dire osef pour les gens paranos.
  • Le support n’est pas partout le même : Si tu utilises jQuery ou un framework y’a pas de raison que ce ne soit pas compatible.
  • Le fichier peut n’être tout simplement pas chargé : quelle différence avec un fichier CSS ? Tu ne vas pas le mettre dans une balise <style>.

Ce sera toujours mieux en CSS, c’est réutilisable partout mais les 3 raisons que tu donnes sont totalement fausses.

+0 -3

Il y a gens qui n’ont pas de JS dans leur navigateur pour d’autres raisons que la paranoïa : certains n’ont pas un appareil assez puissant, un navigateur qui ne le gère pas ou mal (par exemple certains navigateurs pour malvoyants), d’autres utilisent un VPN ou un proxy qui le bloque… tout un tas de raisons qui font que le JS n’est pas une solution. Que certains soient paranos n’empêche pas de leur proposer une expérience correcte.

Et les sites faits en JS… ne devraient probablement pas être faits en JS. Des applications oui, des sites non. Les frameworks JS sont bien trop abusés.

jQuery est de moins en moins utilisé, et ne garantit pas pour autant une compatibilité pour tout. D’autant plus que l’importer pour ajouter une simple gestion du focus c’est inutilement lourd (et de la dette technique en plus).

Les styles passent plus facilement les filtres des proxys/pare-feu que le JS et le non-chargement du CSS va casser toute la mise en page, pas juste une fonctionnalité, l’utilisateur se rendra plus facilement compte qu’il y a un problème que si un JS manque.

P.S. : Tu as aussi le droit de répondre plus aimablement. Que mes arguments ne soient pas toujours applicables suivant les projets pourquoi pas, dire qu’ils sont faux, non.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte