im new to the whole Angular/Web Development world. I am currently trying to improve my HTML/CSS skills and ran into a problem I couldnt solve myself. I am using Bootstrap in my angular project and implemented the cards component. the card for my usecase](https://i.stack.imgur.com/yOj9R.png) I added hover effects with css and made the whole card clickable, now I want to implement a frame/border after the card get clicked (as shown in the image). Does anyone knows a way to do this ?
Best Regards tschanni
.....................................................................................................
CodePudding user response:
your question doesn’t contain any example of your code but you could do something like adding an onclick
or add an event listener to toggle a “clicked” class with the desired border: i.e.
<div onclick="this.classList.toggle('clicked')">card</div>
With CSS
.card {width: 50px; height: 100px;}
.clicked {border: 1px solid red;}
CodePudding user response:
You can do it in simple and code-readable way, for example add this CSS:
.card.selected {
border: 2px solid blue;
}
And JavaScript click event:
const card = document.querySelector('.card');
card.addEventListener('click', function() {
this.classList.toggle('selected');
});