Réponse à partir de 2019:
La meilleure façon (en fait la seule façon *) de simuler un événement de clic réel en utilisant uniquement CSS (plutôt que de simplement survoler un élément ou de rendre un élément actif, où vous n'avez pas mouseUp ) est d'utiliser le hack de case à cocher. Il fonctionne en attachant un labelà un <input type="checkbox">élément via l' for=""attribut de l'étiquette .
Cette fonctionnalité prend en charge un large navigateur (la :checkedpseudo-classe est IE9 +).
Appliquer la même valeur à un <input>« s attribut ID et un accompagnant <label>l » for=""attribut, et vous pouvez dire au navigateur de nouveau style l'étiquette , cliquez avec le :checkedpseudo-classe, grâce au fait que cliquer sur une étiquette cocher et décocher la "associé" <input type="checkbox">.
* Vous pouvez simuler un événement « choisi » par le :activeou :focuspseudo-classe dans IE7 + (par exemple un bouton qui est normalement 50pxlarge, vous pouvez modifier sa largeur tout active: #btnControl:active { width: 75px; }), mais ceux qui ne sont pas vraies événements « cliquez sur ». Ils sont "en direct" pendant toute la durée de sélection de l'élément (par exemple, Tabavec bing avec votre clavier), ce qui est un peu différent d'un véritable événement de clic, qui déclenche une action sur - généralement - mouseUp.
Démo de base du hack de case à cocher (la structure de code de base pour ce que vous demandez):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
Ici, j'ai positionné l'étiquette juste après l'entrée dans mon balisage. C'est pour que je puisse utiliser le sélecteur de frère adjacent (la +clé) pour sélectionner uniquement l'étiquette qui suit immédiatement ma #democase à cocher. Étant donné que la :checkedpseudo-classe s'applique à la case à cocher, #demo:checked + labelne s'applique que lorsque la case à cocher est cochée.
Démo pour redimensionner une image au clic, c'est ce que vous demandez:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>
Cela étant dit, il y a de mauvaises nouvelles. Étant donné qu'une étiquette ne peut être associée qu'à un seul contrôle de formulaire à la fois , cela signifie que vous ne pouvez pas simplement déposer un bouton à l'intérieur des <label></label>balises et l'appeler un jour. Cependant, nous pouvons utiliser du CSS pour donner à l'étiquette un aspect et un comportement assez proches de l'apparence et du comportement d'un bouton HTML.
Démo pour imiter un effet de clic de bouton, au-delà de ce que vous demandez:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
-moz-outline-radius: 5px;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
La plupart du CSS de cette démo sert uniquement à styliser l'élément d'étiquette. Si vous n'avez pas vraiment besoin d'un bouton et que n'importe quel ancien élément suffira, vous pouvez supprimer presque tous les styles de cette démo, similaire à ma deuxième démo ci-dessus.
Vous remarquerez également que j'ai une propriété préfixée là - dedans, -moz-outline-radius. Il y a quelque temps, Mozilla a ajouté cette superbe propriété non spécifiée à Firefox, mais les gens de WebKit ont décidé de ne pas l'ajouter , malheureusement. Considérez donc cette ligne de CSS comme une amélioration progressive pour les personnes qui utilisent Firefox.
:activefonctionne lorsque la souris est enfoncée. Selon ce que vous essayez de faire, vous pourrez peut-être le faire fonctionner en utilisant la pseudo-classe CSS4:target.