¿Puedo tener un efecto de clic en CSS?

Tengo un elemento de imagen que quiero cambiar al hacer clic.

<img id="btnLeft">

Esto funciona:

#btnLeft:hover {
    width: 70px;
    height: 74px;
}

Pero lo que necesito es:

#btnLeft:onclick {
    width: 70px;
    height: 74px;
}

Pero obviamente no funciona. ¿Es posible tener onclickun comportamiento en CSS (es decir, sin usar JavaScript)?

Nov 29 '12 23:11 Alegro

La mejor manera (en realidad, la única manera*) de simular un evento de clic real usando solo CSS (en lugar de simplemente pasar el cursor sobre un elemento o activar un elemento, donde no tienes mouseUp ) es usar el truco de casilla de verificación. Funciona adjuntando labela un <input type="checkbox">elemento mediante el atributo de la etiqueta for="".

Esta característica tiene un amplio soporte para navegadores (la :checkedpseudoclase es IE9+).

Aplique el mismo valor a un <input>atributo de ID y al atributo <label>de que lo acompaña for="", y podrá indicarle al navegador que cambie el estilo de la etiqueta al hacer clic con la :checkedpseudoclase, gracias al hecho de que al hacer clic en una etiqueta se marcará y desmarcará la "asociado" <input type="checkbox">.

* Puede simular un evento "seleccionado" a través de la pseudoclase :activeo en IE7+ (por ejemplo, para un botón que normalmente es ancho, puede cambiar su ancho mientras :) , pero esos no son verdaderos eventos de "clic". Están "en vivo" todo el tiempo que se selecciona el elemento (por ejemplo, al hacer bing con el teclado), lo cual es un poco diferente de un evento de clic verdadero, que activa una acción, normalmente .:focus50pxactive#btnControl:active { width: 75px; }TabmouseUp

Demostración básica del truco de la casilla de verificación (la estructura de código básica para lo que estás preguntando):

Mostrar fragmento de código

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>

Expand snippet

Aquí coloqué la etiqueta justo después de la entrada en mi marcado. Esto es para que pueda usar el selector de hermanos adyacente (la +tecla) para seleccionar solo la etiqueta que sigue inmediatamente a mi #democasilla de verificación. Dado que la :checkedpseudoclase se aplica a la casilla de verificación, #demo:checked + labelsolo se aplicará cuando la casilla de verificación esté marcada.

Demostración para cambiar el tamaño de una imagen al hacer clic, que es lo que estás preguntando:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

Expandir fragmento

Dicho esto, hay algunas malas noticias. Debido a que una etiqueta solo se puede asociar con un control de formulario a la vez , eso significa que no puede simplemente colocar un botón dentro de las <label></label>etiquetas y dar por terminado el día. Sin embargo, podemos usar algo de CSS para hacer que la etiqueta se vea y se comporte bastante parecido a cómo se ve y se comporta un botón HTML.

Demostración para imitar el efecto de hacer clic en un botón, más allá de lo que estás pidiendo:

Mostrar fragmento de código

#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;
    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>

Expand snippet

La mayor parte del CSS en esta demostración es solo para diseñar el elemento de etiqueta. Si en realidad no necesita un botón y cualquier elemento antiguo será suficiente, puede eliminar casi todos los estilos en esta demostración, similar a mi segunda demostración anterior.

Sep 22 '2015 16:09 TylerH

Lo más cerca que estarás es :active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

Sin embargo, esto sólo aplicará el estilo cuando se mantenga presionado el botón del mouse. La única forma de aplicar un estilo y mantenerlo aplicado al hacer clic es usar un poco de JavaScript.

Nov 29 '2012 16:11 Bojangles