[Résolu] Changement de css au focus

Bonjour, j'aimerais que le padding left de mon input baisse de 2px par rapport à son padding left d'origine, au focus. J'aurais pensé que ça fonctionnerais comme ça mais il se trouve que non. Merci à tous pour votre aide !

var nav_search = document.querySelector('.nav-search');
nav_search.addEventListener('focus', function(){
  this.style.paddingLeft = this.style.paddingLeft - 2 + ' px';
});

Modifié par vzytoi (01 Sep 2020 - 19:18)

Et l'eau vzytoi,

Sans html, on peut pas aller bien loin. Aussi, du JS pour ça, c'est un peu utiliser un tank pour tuer une mouche....

<input class="nav-search" type="text" name="nav-search" id="nav-search" />

en css standard

:root{
  --pdl: 100px;
}

.nav-search{
  padding-left:var(--pdl);
}

.nav-search:focus{
  padding-left:calc(var(--pdl) - 50px);
}

En sass, il y a une autoroute pour faire ce genre de choses.

* à vérifier, si je dis pas de bétise (c'est la fin de journée.... ) : la pseudo class :focus est uniquement utilisable sur des input/textarea et probablement tous les éléments html pour les formulaires. Il y a une exception : <a> .
Modifié par niuxe (01 Sep 2020 - 20:52)

niuxe a écrit :
Et l'eau vzytoi,

Sans html, on peut pas aller bien loin. Aussi, du JS pour ça, c'est un peu utiliser un tank pour tuer une mouche....

<input class="nav-search" type="text" name="nav-search" id="nav-search" />

en css standard

:root{
  --pdl: 100px;
}

.nav-search{
  padding-left:var(--pdl);
}

.nav-search:focus{
  padding-left:calc(var(--pdl) - 50px);
}

En sass, il y a une autoroute pour faire ce genre de choses.

* à vérifier, si je dis pas de bétise (c'est la fin de journée.... ) : la pseudo class :focus est uniquement utilisable sur des input/textarea et probablement tous les éléments html pour les formulaires. Il y a une exception : &lt;a&gt; .

Merci beaucoup pour ta réponse, j'y avais aussi pensé ( de plus que je code en scss et non pas en css ce qui me donne la possibilité de faire des fonctions plus "puissantes" ). Je trouvais cependant que cette solution allait facilement me perdre. Je vais surement utiliser cette technique mais j'ai alors une question, est-ce que le fait d'appeler :root plusieurs fois tout au long de la page css peut poser un problème d'optimisation pour celui-ci?
Encore une fois mille mercis !

<input class="nav-search" placeholder="Search for statics..." type="text"/>

( le code html que j'ai oublié de mettre )
Modifié par vzytoi (01 Sep 2020 - 21:01)

Je t'avoue moi aussi je ne fais que du sass depuis très longtemps (8 - 9 ans). D'ailleurs, refaire du css pur, je me ferai bien chi**. En ce qui concerne ta question, je n'en sais rien. Je pense que tu risques d'écraser les déclarations précédentes. Il suffit de tester. D'ailleurs, :root doit être édité vers le haut du fichier.

Coucou !

Si je peux me permettre, utiliser un calc et des var pour faire 100px - 2px c'est aussi un peu overkill... Généralement on utilise le calc pour des opérations complexes dont on a pas la solution et ou le résultat varie et a besoin d’être recalculer runtime comme calc(100% - 2px).

Parce-que sinon on fait ça :

.nav-search{
  padding-left: 100px;
}
.nav-search:focus{
  padding-left: 98px;
}

ET y'a pas plus performant hahaha. Et si tu veux des variables tu peux en créer 2.


Pour le coté Js qui marche pas (oui c'est overkill++ mais faut bien comprend pk ça marche pas), il y a plusieurs trucs qui coincent.

Déjà le .style.paddingLeft ne peux accéder qu'au style défini dans le html comme ça par exemple :

<input class="nav-search" style="padding-left:100px" type="text"/>

Et non pas à ton code CSS externalisé. Pour chopper le CSS tu peux passer par :

window.getComputedStyle(test).getPropertyValue('padding-left')

En vrai tu vas chopper le style une fois appliqué, pas vraiment la valeur du CSS.

Ensuite si tu affiches ce que style.paddingLeft ou getPropertyValue te renvoi tu verras que c'est un string avec px dedans : '100px'. Et oui la valeur c'est pas un nombre donc pas possible de faire une opération dessus... Partant de là, j'imagine tu peux le parser pour enlever "px" et transformer le '10' en 10 pour faire une opération dessus et le remettre en rajoutant +'px'...
bref... la grosse galère !

Bonne journée à vous deux !

niuxe a écrit :
Je t'avoue moi aussi je ne fais que du sass depuis très longtemps (8 - 9 ans). D'ailleurs, refaire du css pur, je me ferai bien chi**. En ce qui concerne ta question, je n'en sais rien. Je pense que tu risques d'écraser les déclarations précédentes. Il suffit de tester. D'ailleurs, :root doit être édité vers le haut du fichier.

Bonjour ! J'ai tester et ça n'écrase pas les déclarations précédentes. Le fait de devoir éditer mon :root au haut de ma page était justement le problème que j'avais avec cette solution, à chaque fois que je voudrais modifier la valeur je serais obligé de remonter tout en haut de ma page.
Pour une seule valeurs, ça irait mais si j'utilise cette solution plusieurs fois dans ma page ça commencerais à être embêtant.

_laurent a écrit :

Si je peux me permettre, utiliser un calc et des var pour faire 100px - 2px c'est aussi un peu overkill... Généralement on utilise le calc pour des opérations complexes dont on a pas la solution et ou le résultat varie et a besoin d’être recalculer runtime comme calc(100% - 2px).

Salut ! Ce serait évidement la solution la plus simple mais mon objectif était que une valeurs qui s'adapte automatiquement, calc(100% - 2px) fonctionne ?

_laurent a écrit :

Déjà le .style.paddingLeft ne peux accéder qu'au style défini dans le html comme ça par exemple :

<input class="nav-search" style="padding-left:100px" type="text"/>

Et non pas à ton code CSS externalisé. Pour chopper le CSS tu peux passer par :

window.getComputedStyle(test).getPropertyValue('padding-left')

En vrai tu vas chopper le style une fois appliqué, pas vraiment la valeur du CSS.

Merci beaucoup pour ta solution, je comprends beaucoup mieux.

Bonne journée à vous deux !
Modifié par vzytoi (02 Sep 2020 - 15:09)

vzytoi a écrit :
Ce serait évidement la solution la plus simple mais mon objectif était que une valeurs qui s'adapte automatiquement

S'adapte a quoi ? Ton padding est variable ? Tu aurais un exemple concret je suis curieux ?

vzytoi a écrit :
calc(100% - 2px) fonctionne ?

Oui c'est même fait pour ça... parceque faire calc(100px - 2px) ça n'a pas spécialement d’intérêt...

Et l'eau,

J'ai pas pu répondre avant mais j'ai suivi en partie la discussion.
@_laurent : désolé, je ne suis pas d'accord avec ta solution. Tu mélanges le html, css et le JS. Or il est de bonnes pratiques de séparer les diverses techno.

Par contre, ton dernier commentaire est très pertinent ==> +1 pour moi

En tout cas, avec le sass, on se casse moins la tête. Surtout si tu fais de l'atomic. C'est tellement plus modulaire
Modifié par niuxe (03 Sep 2020 - 23:21)

Coucou

niuxe a écrit :
@_laurent : désolé, je ne suis pas d'accord avec ta solution. Tu mélanges le html, css et le JS. Or il est de bonnes pratiques de séparer les diverses techno.

Ah non ca c'était juste l'explication de pk le Js marchait pas Je suis d'accord que c'est pas le mieux.

Ma solution mélange rien et c'est :

.nav-search{
  padding-left: 100px;
}
.nav-search:focus{
  padding-left: 98px;
}

En fait je comprend pas pourquoi vous voulez a tout prix passer par des variables alors qu'elles ne sont pas variable... Je comprends pas la parties adaptation / variabilité du padding ne fait mais je passe peut etre a cote du sujet
Modifié par _laurent (04 Sep 2020 - 00:44)