What is this CSS checkbox state called, and how can I remove its effects?-CodePudding

Consider this checkbox:

<input type="checkbox" />

When pressing a keyboard button when this checkbox is focused, a solid black outline appears around it. I can get rid of by removing the outline:

input {
  outline: none;
}

<input type="checkbox" />

However, I wish to apply an outline to the actual element, and this method would invalidate it. I was wondering if there was a pseudoclass that could be used to select this checkbox state. If so, what is it called and how do I access it? If not, is there any other viable way (CSS only) to do achieve this? I thought the :focused pseudoclass would work, but this selects the focused state of the checkbox and not whatever this state is, when the checkbox is focused and a key is pressed.

P.S. when I add an outline to the checkbox, the problem appears in a different format. The outline is somehow "extended", almost as if a padding or border was added to the element (try focusing on the following checkbox and pressing a key):

input {
  outline: solid red 3px;
}

<input type="checkbox" />

CodePudding user response：

I think outline-offset: 0px; under the element state focus-visible is what you're looking for:

input {
  outline: solid red 3px;
}

input:focus-visible
{
  outline-offset: 0px;
}

<input type="checkbox" />