How to remove focus outline on clicked checkbox, but not keyboard focus?-CodePudding

In the example below, if you keyboard navigate to the checkbox, I get the custom focus state I'm looking for. However, I don't want the focus to show on click. I only want to show the focus state when it's keyboard navigated to.

How do I remove the focus state if clicked on?

input[type=checkbox]:focus, input[type=checkbox]:focus-visible {
  outline: none;
}

label:focus-within {
  outline: 2px solid #005fec;
  outline-offset: 4px;
  z-index: 10;
}

<label for="check1">
  <input type="checkbox" name="check1" id="check1">
  <span>Check Here</span>
</label>

CodePudding user response：

Try this!

input[type=checkbox], input[type=checkbox] {
  outline: none;
}

<label for="check1">
  <input type="checkbox" name="check1" id="check1">
  <span>Check Here</span>
</label>

CodePudding user response：

I changed it to the css solution, but I need to modify the html structure, take the input out of the lable, and modify the css like this

input[type=checkbox]:focus, input[type=checkbox]:focus-visible {
  outline: none;
}

label[for='check2']{
    padding-left: 25px;
    margin-left: -25px;
}

#check2:focus-visible   label[for='check2']{
  outline: 2px solid #005fec;
  outline-offset: 4px;
  z-index: 10;
}

<input type="checkbox" name="check2" id="check2">
<label for="check2">
    <span>Check Here2</span>
</label>

CodePudding user response：

To avoid showing the outline on focus you have to use: outline: none; (https://developer.mozilla.org/de/docs/Web/CSS/outline). In your case you have to add outline: none; only to the class label:focus-within.

label:focus-within {
  outline: 2px solid #005fec;
  outline-offset: 4px;
  z-index: 10;
  outline: none;
}

<label for="check1">
  <input type="checkbox" name="check1" id="check1">
  <span>Check Here</span>
</label>