Como podria hacer que al dar click sobre una de las tarjetas se aplique los mismos estilos que tiene en hover (border y box-shadow)? es como si fuese el active. Cuando se da click en la tarjeta, en si se esta dando click al label que ocupa todo el ancho y alto de su padre, el input de tipo checkbox no tiene ancho para que no sea visible porque estoy haciendo que el circulo que se muestra tenga estilos especificos que me han pedido... Adjunto el codigo de estructura y estilos de lo que mas o menos tengo hasta el momento
.container {
display: flex;
}
.wrapper-card {
width: 150px;
height: 200px;
background: pink;
position: relative;
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
margin: 20px;
}
.wrapper-card:hover {
border: 2px solid blue;
box-shadow: 0 10px 21px 1px rgba(0, 0, 0, .1);
}
.select-product-area {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
}
label {
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
position: absolute;
}
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked~.checkmark {
border-color: blue;
}
input:checked~.checkmark:after {
display: block;
}
.checkmark {
width: 25px;
height: 25px;
border-radius: 50px;
border: 1.87px solid #000;
cursor: pointer;
z-index: 1;
display: block;
position: absolute;
right: 15px;
top: 18px;
}
.checkmark::after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 7px;
height: 12px;
border: solid blue;
border-width: 0 1.87px 1.97px 0;
transform: rotate(45deg);
}
<div class="container">
<div class="wrapper-card">
<div class="select-product-area">
<label class="selected-product" for="tablet-2015">
<input type="checkbox" id="tablet-2015" name="tablet-2015" data-name-display="tablet-2015" />
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="wrapper-card">
<div class="select-product-area">
<label class="selected-product" for="desktop-2020">
<input type="checkbox" id="desktop-2020" name="desktop-2020" data-name-display="desktop-2020" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>