Object leaving property value after being clicked on - html

Question

I'm practicing HTML and CSS at the moment and making webpage from a PSD-template, it's going good so far, but I'm facing the following problem:
The problem is that border disappears after being clicked on and :focus doesn't seem to handle the issue. I need the border to be present until i click on another element, can it be done with CSS? If yes (and that's probably the answer), then how? If it has a JS solution, I'd be glad if you help me with that.
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="Images/phone_img.png">
<p>Responsive</p>
<p>Websites</p>
</div>
</div>

Answer 1

div:focus Won't work by default, unless the div has a tabindex attribute.
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
From W3Schools.
It also enables focus functionality to the element, so if you want your div to have focusing abilities, just add this attribute: tabindex="0".
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon" tabindex="0">
<img src="https://via.placeholder.com/150">
<p>Responsive
<p>Websites</p>
</p>
</div>
</div>
It also adds an outline when focused, which you may disable using outline: 0;.

Answer 2

i made with jquery.
$(document).ready(function(){
$('.icons_and_text').click(function(){
$('.icon').toggleClass("new");
})
});
.icons_and_text{
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon{
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover{
cursor: pointer;
}
.icon:active{
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus{
border: 3px solid #dedede;
border-bottom: white;
}
.new{
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="https://picsum.photos/500/200">
<p>Responsive <p>Websites</p></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>