Changer la couleur du bouton lorsque l'utilisateur clique dessus

Avec la pseudo-classe :target :

input:target {
  // code
}

Soldat8889 a écrit :
Avec la pseudo-classe :target :

input:target {
  // code
}

Ca ne fonctionne malheureusement pas.

Tu peux envoyer le code que tu as mis ?

Tintin75 a écrit :
Tu peux envoyer le code que tu as mis ?

input:target{
background-color: #555;
}

Je ne sais pas si c'est la bonne façon de procéder. Je suis un peu nul en css.

il me semble qu'on ne parle pas de bouton ( au niveau du code <button type="button">Cliquez ici</button>) mais bien d'un <input> et sa représentation graphqiue bouton . Comment votre code peut il différencier vos différentes balises input à part par le tag html <input> ( pas d' id ni de class ) vous allez vous baser sur la valeur de value ( <input value="">!!? Vos boutons doivent être "mutually exclusive" ! Un script doit vérifier l'état des boutons et mettre à jour leurs aspects visuels lors de chaque évènement nouveau ! maintenant le code css fait du dynamique comme javascript et donc les notions sont un peu plus difficile a comprendre ( type d'unité et instruction css calc() par exemple lire https://www.alsacreations.com/astuce/lire/1662-conserver-ratio-16-9-images-videos.html )!

0) votre code ne montre pas
a) le code source pour la fonction onclick="couleur()">
b) si vous utilisez une librairie comme jquery .

1) Si vous n'utilisez pas JQuery ajouter ce code <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

2)pour tester le code ( avec jquery) utilisez l'outil debug du navigateur (onglet console et element )
a) copier dans la console >inputs=jQuery("input") puis inputs.length puis inputs[0] puis regarder le resultat dans la console .

b) maintenant essayer inputs.css({"backgroundColor":"red"}) puis regarder le résultat dans l' onglet element le code html des <input>

Cette technique permet de tester ce qui se passe au niveau navigateur . prepros est aussi utile pour visualiser en temps réel ce qui se passe sur un serveur http interne a prepro !!

3) je ne pense pas qu'avec le code les input type button ne garde pas en mémoire leurs états comme le ferait un <input type="checkbox" >ou vous cohez et l'élément coché reste coché même si le curseur de la souris va ailleurs . Le style intéractif ne dure pas . Jetez un coup d'oeil aux framework Css comme boostrap pour voir le comportement et le code relatif aux input text / button ( https://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm) .
sous ie voici la capture d'écran ou j'ai activé les pseudo classes .


4)" J'ai déjà épluché presque tous les sites internets sans succès"
J'aimerais bien connaitre la façon dont vous avez épluché ??!! Faite une page de test, pourquoi copiez des tonnes de code html alors que le problème ou la solution peut être testé avec un code minimal et suffisant . Enfin il faut parfois faire des modifications à plusieurs endroits dans le code . Dans votre cas vous avez seulement modifié le code css et pas le code html ( connu posté) ou javascript ( inconnu car lien dans le code )! Dites vous que toutes questions a déja sa réponse sur internet sauf si vous vous limitez au français et sauf si vous avez un bon niveau HTML css js coté client. Dans ce cas vous trouverez des indices des informations sur différents sites internets ( blog , forum ...) mais pas le code a copier/coller même si RTFM que j'affectionne est toujours de mise ( JQuery HTML CSS ont tous une documention API spécification ...idem pour les navigateurs et le site can i use https://caniuse.com/#search=target .) . Le problème est toujours de bien choisir les mots et de bien formuler la question du problème ( l'expérience et la compréhension du mode de fonctionnement d'un navigateur aide ) . Sinon une réponse parmis d'autres ( alsacréation et google sont vos amis ) se trouve sur stackoveflow avec des snippets ( zone de la page qui permet de tester le code textuel de la page directement dans la page un peu comme le concept de cell avec ipython jupyter ..... ) : https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button#31178770
a https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button#31178770
il y a un bug pour les boutons ( a confirmer par plusieurs navigateurs mais le principe est la )
cliquer sur un lien ajoute bien le code suivant :target { color: red;} . On a un lien de selection et pas un lien standart de navigation qui charge une page !!!
Modifié par 75lionel (05 Jan 2018 - 01:44)

Je ne dirais pas mieux que 75lionel


Je rajouterais même que les <input> sont mal orthographiés surtout au niveau de leur fermeture. . je laisse réfléchir.
Modifié par JENCAL (05 Jan 2018 - 09:43)

75lionel a écrit :
il me semble qu'on ne parle pas de bouton ( au niveau du code &lt;button type="button"&gt;Cliquez ici&lt;/button&gt;) mais bien d'un &lt;input&gt; et sa représentation graphqiue bouton . Comment votre code peut il différencier vos différentes balises input à part par le tag html &lt;input&gt; ( pas d' id ni de class ) vous allez vous baser sur la valeur de value ( &lt;input value=""&gt;!!? Vos boutons doivent être "mutually exclusive" ! Un script doit vérifier l'état des boutons et mettre à jour leurs aspects visuels lors de chaque évènement nouveau ! maintenant le code css fait du dynamique comme javascript et donc les notions sont un peu plus difficile a comprendre ( type d'unité et instruction css calc() par exemple lire https://www.alsacreations.com/astuce/lire/1662-conserver-ratio-16-9-images-videos.html )!

0) votre code ne montre pas
a) le code source pour la fonction onclick="couleur()"&gt;
b) si vous utilisez une librairie comme jquery .

1) Si vous n'utilisez pas JQuery ajouter ce code &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

2)pour tester le code ( avec jquery) utilisez l'outil debug du navigateur (onglet console et element )
a) copier dans la console &gt;inputs=jQuery("input") puis inputs.length puis inputs[0] puis regarder le resultat dans la console .

b) maintenant essayer inputs.css({"backgroundColor":"red"}) puis regarder le résultat dans l' onglet element le code html des &lt;input&gt;

Cette technique permet de tester ce qui se passe au niveau navigateur . prepros est aussi utile pour visualiser en temps réel ce qui se passe sur un serveur http interne a prepro !!

3) je ne pense pas qu'avec le code les input type button ne garde pas en mémoire leurs états comme le ferait un &lt;input type="checkbox" &gt;ou vous cohez et l'élément coché reste coché même si le curseur de la souris va ailleurs . Le style intéractif ne dure pas . Jetez un coup d'oeil aux framework Css comme boostrap pour voir le comportement et le code relatif aux input text / button ( https://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm) .
sous ie voici la capture d'écran ou j'ai activé les pseudo classes .
upload/1515109901-48731-testinputieboostrap.png

4)" J'ai déjà épluché presque tous les sites internets sans succès"
J'aimerais bien connaitre la façon dont vous avez épluché ??!! Faite une page de test, pourquoi copiez des tonnes de code html alors que le problème ou la solution peut être testé avec un code minimal et suffisant . Enfin il faut parfois faire des modifications à plusieurs endroits dans le code . Dans votre cas vous avez seulement modifié le code css et pas le code html ( connu posté) ou javascript ( inconnu car lien dans le code )! Dites vous que toutes questions a déja sa réponse sur internet sauf si vous vous limitez au français et sauf si vous avez un bon niveau HTML css js coté client. Dans ce cas vous trouverez des indices des informations sur différents sites internets ( blog , forum ...) mais pas le code a copier/coller même si RTFM que j'affectionne est toujours de mise ( JQuery HTML CSS ont tous une documention API spécification ...idem pour les navigateurs et le site can i use https://caniuse.com/#search=target .) . Le problème est toujours de bien choisir les mots et de bien formuler la question du problème ( l'expérience et la compréhension du mode de fonctionnement d'un navigateur aide ) . Sinon une réponse parmis d'autres ( alsacréation et google sont vos amis ) se trouve sur stackoveflow avec des snippets ( zone de la page qui permet de tester le code textuel de la page directement dans la page un peu comme le concept de cell avec ipython jupyter ..... ) : https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button#31178770
a https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button#31178770
il y a un bug pour les boutons ( a confirmer par plusieurs navigateurs mais le principe est la )
cliquer sur un lien ajoute bien le code suivant :target { color: red;} . On a un lien de selection et pas un lien standart de navigation qui charge une page !!!

Merci beaucoup