如何修改input元素的:focus-visible行为，实现与button一致的聚焦样式？

我需要实现：鼠标点击聚焦input元素时移除轮廓环，但通过键盘导航（如Tab键）聚焦时保留该轮廓。一周前有人提过相同问题但未得到解决方案，我的情况略有不同。

Input 代码 #

HTML #

<form class="custom-form">
  <label class="custom-label" for="my-input">
    <span>My Input</span>
    <input id="my-input" class="custom-input" name="my-input" type="number" min="0" max="100" value="00.00" step="1.00" required 
      aria-valuemin="0" aria-valuemax="100" aria-required="true" aria-invalid="false">
  </label>
</form>

TailwindCSS（Less语法） #

.custom-form {
  @apply flex flex-row;
}
.custom-form .custom-label {
  @apply flex flex-col space-y-1;
}
.custom-form .custom-label > span {
  @apply pl-1;
}
.custom-form .custom-input {
  @apply max-w-[100px];
  @apply mr-2 px-1 py-[3px];
  @apply text-base;
  @apply border rounded border-gray-200 dark:border-neutral-600 focus:border-neutral-600 dark:focus:border-neutral-100;
  @apply outline-none;
  /*@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
  @apply focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-100;*/
  @apply bg-neutral-100 dark:bg-neutral-700;
  @apply transition-all duration-75;
}
.custom-form input[type=number].custom-input {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

我已经给input的focus状态设置了符合W3非文本对比度准则的边框样式。其他UI元素（比如按钮）已经实现了我想要的效果：

Button 代码 #

HTML #

<button class="custom-button">
  Button
</button>

TailwindCSS（Less语法） #

.custom-button {
  @apply px-3 py-1 rounded;
  @apply bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300;
  @apply dark:bg-neutral-900 dark:hover:bg-neutral-700 dark:active:bg-neutral-600;
  @apply border border-gray-200 dark:border-neutral-600;
  @apply focus:border-neutral-600 dark:focus:border-neutral-100;
  @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
  @apply focus-visible:outline-outline-light dark:focus-visible:outline-outline-dark;
  @apply transition-all duration-75;
}

我希望input能和button有完全一致的样式行为。

已考虑的替代方案 #

• 移除所有元素的轮廓环，仅通过focus状态的边框样式实现聚焦效果。但键盘快速导航时轮廓更容易识别，不太想采用。
• 为所有适用UI元素添加轮廓环。但需要预留更多间距避免重叠，会破坏极简风格，不考虑。
• CSS设置默认outline为none，给每个input添加Tab键监听，键盘聚焦时启用轮廓。可以作为最后方案，但不确定性能影响（每个表单最多十几个input）。

另外，能不能修改:focus-visible的行为？了解到不同浏览器对它的表现有差异。

内容的提问来源于stack exchange，提问作者Doombringer