web-dev-qa-db-fra.com

CSS change le style du bouton après clic

Je me demandais s'il y avait un moyen de changer le style d'un bouton, en CSS, après que vous ayez cliqué dessus, donc pas un element:active. Merci!

csscss3buttonstyling
19
JohnyNich

Si vous recherchez une option purement css, essayez d’utiliser la pseudo-classe: focus.

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}
18
Mark

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

Link est l'apparence normale, hover est lorsque vous passez le curseur de la souris sur, active est l'état dans lequel vous cliquez, focus suit actif et visited est l'état dans lequel vous cliquez finissez lorsque vous déconcentrez le lien cliqué récemment.

J'imagine que vous souhaitez obtenir un style différent sur focus ou visited, vous pouvez alors 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 problème est le suivant:

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

Vous pouvez utiliser les outils de développement de votre navigateur Web pour forcer les états de l'élément comme ceci (Chrome-> Outils de développement/Inspecter un élément-> Style-> Filtre: hov): Forcer l'état dans Chrome Outils de développement

20
MrD

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

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}
<a href="#">A button</a>

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

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});
.button-clicked {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
4
CalvT

Essayez de vérifier le contour sur le focus du bouton:

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

Si vous en avez, définissez-le simplement sur none.

4
Matúš Šťastný

Il est possible de faire avec CSS uniquement en sélectionnant le pseudo-élément actif et actif du bouton.

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

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

Vous pouvez également écrire une simple fonction de clic jQuery qui modifie 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 code: http://codepen.io/fennefoss/pen/pRxrVG

2
Mikkel Fennefoss

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

Vous êtes limité cependant, vous ne pouvez changer que:

  • couleur
  • couleur de l'arrière plan
  • border-color (et ses sous-propriétés)
  • contour-couleur
  • Les parties de couleur des propriétés de remplissage et de contour

Je n'ai pas lu cet article concerne la nouvelle visite du :visited mais peut-être que certaines personnes plus intelligentes ont trouvé plus de moyens de le pirater.

1
Paul van den Dool