How to change a div's outline color when selected?
You can try :focus
pseudo-class. Note you will need tabindex
to make your div
s focusable.
div {
background: #ccc;
margin: 20px;
}
div:focus {
outline: 1px solid blue;
}
<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>
Another approach using CSS:
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
outline: 1px solid blue;
}