html - Is it possible to style just focus on tab at checkboxes?

Question

I wonder if it is possible to style just focus on tab (using ↹ to navigate through the page)but not if the user click on the item.

Just like the default behaviour of checkboxes. It gets a blue outline (looks like box-shadow) if I use tab.

Like I want a new red box-shadow/outline on focus by tab but not if the user clicks on the checkbox.

<input id="checkBox" type="checkbox">

标签： htmlcss

Answer 1

you can do it by Jquery

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('#checkBox').addClass('outline');
  }
});

document.addEventListener('click', function(e) {
  $('#checkBox').removeClass('outline');
});

.outline{
 box-shadow: 2px 2px 2px red;
 }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">

OR
this plugin:https://github.com/ten1seven/track-focus
in css:

body[data-whatinput="keyboard"] #checkBox:focus {
  box-shadow:  0 0 5px red;
}