CSS bouton de changement de style après cliquez sur

Je me demandais si il y avait un moyen de changer un bouton de style, css, après qu'il a été cliqué, donc pas un element:active.
Merci!

  • vous pouvez coller le code ici et un peu plus d'explication ?
  • Vous pouvez ajouter une fonction jQuery pour ajouter une classe supplémentaire pour le bouton cliquez sur
InformationsquelleAutor JohnyNich | 2017-02-09
  1. 19

    Si vous êtes à la recherche pour un pur css option, essayez d'utiliser l' :focus pseudo classe. 

    #style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}
    InformationsquelleAutor Mark
  2. 21

    Chaque lien a cinq états différents: link, hover, active, focus et visited.

    Link est l'apparence normale, hover est lorsque vous survolez, active est l'état quand il est cliqué, focus suit active et visited est à l'état en fin de compte vous lorsque vous unfocus récemment cliqué sur le lien.

    Je suppose que vous voulez atteindre un style différent sur focus ou visited, alors vous pouvez ajouter le code CSS suivant:

    a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

    Un ordre recommandé dans votre CSS pour ne pas causer de l'ennui est la suivante:

    a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

    Vous pouvez utiliser votre navigateur web developer tools, pour forcer les états de l'élément comme ceci (Chrome->Outils de développement/Inspecter l'Élément->Style>Filtre :hov):
    La Force de l'état dans les Outils de développement Chrome

    • Dans la plupart des cas à l'aide de l'ancre tags :visité est l'état le plus propre css mise en œuvre d'un bouton avec un cliqué état. Vous pouvez également réutiliser une case cochée, jsfiddle.net/4hrzf39g/2, mais c'est un peu beaucoup de l'omi.
    InformationsquelleAutor MrD
  3. 4

    Quel est le code de votre bouton? Si c'est un tag, alors vous pourriez faire ceci:

    CSS:

    a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}

    HTML:

    <a href="#">A button</a>

    Ou vous pouvez utiliser jQuery pour ajouter une classe sur un clic, comme ci-dessous:

    JS:

    $("#button").click(function() {
  $("#button").addClass('button-clicked');
});

    CSS:

    .button-clicked {
  background: red;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

    InformationsquelleAutor CalvT
  4. 4

    Essayez de vérifier l'aperçu sur la touche de l'accent:

    button:focus {
    outline: blue auto 5px; 
}

    Si vous l'avez, il suffit de le régler à none.

    • C'était la seule solution qui a fonctionné pour moi. La frontière de la propriété n'était pas assez, il a été aperçu qui a résolu le problème.
    InformationsquelleAutor Matúš Šťastný
  5. 2

    Il est possible de faire avec CSS uniquement par la sélection d'actifs et de se concentrer pseudo élément de la touche. 

    button:active{
    background:olive;
}

button:focus{
    background:olive;
}

    Voir codepen: http://codepen.io/fennefoss/pen/Bpqdqx

    Vous pouvez également écrire une simple jQuery cliquez sur la fonction qui change la couleur d'arrière-plan.

    HTML:

    <button class="js-click">Click me!</button>

    CSS:

    button {
  background: none;
}

    JavaScript:

      $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

    Découvrez ce codepen: http://codepen.io/fennefoss/pen/pRxrVG

    InformationsquelleAutor Mikkel Fennefoss
  6. 1

    Si votre bouton serait un <a> élément, vous pouvez utiliser le :visited sélecteur.

    Vous êtes limité cependant, vous pouvez uniquement modifier:

    • couleur
    • background-color
    • border-color (et de ses sous-propriétés)
    • contour de couleur
    • La couleur des pièces de fond et de contour propriétés

    Je n'ai pas lu cet article réexamine le :visited mais peut-être que certains des gens intelligents ont trouvé plusieurs façons de le pirater.

    InformationsquelleAutor Paul van den Dool