Skip to main content
Añadir característica de escalado
Origen Enlace

Como bien dices eso se hace con un checkbox, no hay otra forma con puro CSS, un div carece de algun evento activo/inactivo

No es complicado de hacer lo que pides, aunque pierdes la posibilidad de seleccionar el contenido dentro del div, si esto no cumple tus expectativas deberás voltear a ver un poco de javascript aunque no lo quieras.

input{ display:none }
div{ background: #fe0; position: relative;}
input:checked + div{ background: #f30;#f30;transform: scale(3, 3)}
div label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}
<input type="checkbox" id="scale">
<div>
  <label for="scale"></label>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem fugiat esse suscipit, ipsa qui maiores temporibus ab, impedit numquam doloremque non quis ex omnis, incidunt voluptatibus labore alias molestias enim.
</div>

Como bien dices eso se hace con un checkbox, no hay otra forma con puro CSS, un div carece de algun evento activo/inactivo

No es complicado de hacer lo que pides, aunque pierdes la posibilidad de seleccionar el contenido dentro del div, si esto no cumple tus expectativas deberás voltear a ver un poco de javascript aunque no lo quieras.

input{ display:none }
div{ background: #fe0; position: relative;}
input:checked + div{ background: #f30;}
div label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}
<input type="checkbox" id="scale">
<div>
  <label for="scale"></label>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem fugiat esse suscipit, ipsa qui maiores temporibus ab, impedit numquam doloremque non quis ex omnis, incidunt voluptatibus labore alias molestias enim.
</div>

Como bien dices eso se hace con un checkbox, no hay otra forma con puro CSS, un div carece de algun evento activo/inactivo

No es complicado de hacer lo que pides, aunque pierdes la posibilidad de seleccionar el contenido dentro del div, si esto no cumple tus expectativas deberás voltear a ver un poco de javascript aunque no lo quieras.

input{ display:none }
div{ background: #fe0; position: relative;}
input:checked + div{ background: #f30;transform: scale(3, 3)}
div label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}
<input type="checkbox" id="scale">
<div>
  <label for="scale"></label>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem fugiat esse suscipit, ipsa qui maiores temporibus ab, impedit numquam doloremque non quis ex omnis, incidunt voluptatibus labore alias molestias enim.
</div>

Origen Enlace

Como bien dices eso se hace con un checkbox, no hay otra forma con puro CSS, un div carece de algun evento activo/inactivo

No es complicado de hacer lo que pides, aunque pierdes la posibilidad de seleccionar el contenido dentro del div, si esto no cumple tus expectativas deberás voltear a ver un poco de javascript aunque no lo quieras.

input{ display:none }
div{ background: #fe0; position: relative;}
input:checked + div{ background: #f30;}
div label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}
<input type="checkbox" id="scale">
<div>
  <label for="scale"></label>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem fugiat esse suscipit, ipsa qui maiores temporibus ab, impedit numquam doloremque non quis ex omnis, incidunt voluptatibus labore alias molestias enim.
</div>