【发布时间】：2022-03-01 04:31:12
【问题描述】：
我正在尝试使用 Bootstrap 5 切换按钮（使用大纲样式以获得更明显的视觉强调）。然而，UX 体验并不是我所希望的。 （见https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles）
切换本身效果很好，它的焦点（或者我应该说的点击焦点之后）就是问题所在。当按钮处于未选中状态时，视觉线索很突出，因为按钮被勾勒出来。当按钮处于选中状态时，视觉线索再次突出，因为按钮已被填充。当按钮从未选中状态转变为选中状态时，变化是显而易见的，因为它从轮廓转变为填充。
问题在于取消选中时。当按钮从选中状态转变为未选中状态时，按钮将保持填充状态，直到 a) 鼠标在设备上使用光标移动，或 b) 页面上的另一个位置在触摸设备上被触摸。用户显然认为他们没有取消选中该按钮，而实际上该按钮已被取消选中，然后继续尝试取消选中该按钮。
在处理按钮组中的多个复选框时，问题更加明显。 （见https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups）
我尝试使用 javascript 在复选框的 click 事件上调用 blur，尽管这种方法的成功程度有限，但它在触摸设备上没有任何作用，因为设备的虚拟指针仍然悬停在按钮上.我还尝试在页面上的不同元素上调用focus，结果相同。
有人有什么建议吗？
【问题讨论】：
-
我也看到了这个 .. 很可能是一个实际的错误 - 你能把它添加到这里的项目中吗：github.com/twbs/bootstrap/issues
-
“错误”位于
@mixin button-outline-variant中的mixins/_buttons.scss...它以相同的样式定义了.btn-check:checked + &和.btn-check:active + &。
标签： javascript html user-experience togglebutton bootstrap-5