I have an input element with type radio. When the element receives focus via keyboard, it should display a focus style, but when accessed via mouse click, the focus should be removed. I want to achieve this without using JavaScript or jQuery. This element is implemented on multiple pages, but I have a single shared CSS file for its styling.
<div class="radio">
<input type="radio" value="button1">
<span class="focus"></span>
</div>
css:
.radio{
input{
&:focus{
~ .focus{
outline:1px solid red;
}
}
}
}
The code I have written does not remove the focus on mouse click.