xxxxxxxxxx1
<div class="container mt-5 pt-5">2
<div class="card" tabindex="1">3
<div class="card-body">4
<h5 class="card-title">Card title</h5>5
<p class="card-text">6
Some quick example text to build on the card title and make up the bulk of the7
card's content.8
</p>9
<button type="button" class="btn btn-primary">Button</button>10
</div>11
</div>12
</div>xxxxxxxxxx1
.card.active {2
border: 1px solid #1266f1;3
/* disable default focus outline */4
outline: none;5
/* prevent card content jump after border added */6
margin: -1px;7
border-color: #1266f1;8
box-shadow: inset 0px 0px 0px 1px #1266f1;9
}10
11
.card-title {12
transform-origin: 0 0;13
transition: all .2s ease-out;14
}15
16
.card.active .card-title {17
color: #1266f1;18
background-color: white;19
transform: translateY(-2.3rem) translateX(-1rem) scale(.8);20
width: fit-content;21
padding: 0 .5rem;22
}23
xxxxxxxxxx1
const card = document.querySelector('.card');2
3
card.addEventListener('focus', () => {4
card.classList.add('active')5
})6
7
card.addEventListener('blur', () => {8
card.classList.remove('active')9
})10
11
Console errors: 0