如何创建最简HTML切换按钮？实现继承浏览器默认按下样式

我想要创建尽可能简单的HTML切换按钮，但一直找不到具体实现方法。我知道HTML本身没有直接支持切换按钮的特性，仅能借助ARIA属性aria-pressed来实现。我写了示例代码，用带aria-pressed的<button>元素，JS能成功切换属性值，但按钮外观完全没变化。

我注意到默认按钮在浏览器里有悬停、点击按住时的样式变化，所以希望这个切换按钮在aria-pressed="true"时，能继承浏览器默认的“按下”状态样式，最好不用写任何特定CSS（比如指定背景色）。请问有没有办法实现？

我的代码示例：

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
  <style>

  </style>
</head>

<body>
  <button type="button" id="btn-my-toggle" aria-pressed="false">Click me, a toggle button</button>
</body>

<script>
  function on_my_toggle_btn_click(e) {
    let isPressed_str = this.getAttribute('aria-pressed');
    let isPressed = (isPressed_str === 'true');
    isPressed = !(isPressed);
    this.setAttribute('aria-pressed', isPressed);
    console.log(this.getAttribute('aria-pressed'));
  }

  let my_toggle_btn = document.getElementById('btn-my-toggle');
  my_toggle_btn.onclick = on_my_toggle_btn_click;
</script>

</html>

解决方案 #

浏览器默认的按钮“按下”状态仅对应:active伪类（鼠标按住时生效），没有为aria-pressed属性提供默认持久样式。要实现需求，必须添加几行极简CSS，复用浏览器内置的系统颜色和样式规则，完全不用自定义颜色值：

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    /* 复用浏览器原生按钮的按下状态视觉效果 */
    button[aria-pressed="true"] {
      background-color: ButtonFace;
      border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
      border-style: inset;
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <button type="button" id="btn-my-toggle" aria-pressed="false">Click me, a toggle button</button>
</body>
<script>
  function on_my_toggle_btn_click(e) {
    let isPressed = this.getAttribute('aria-pressed') === 'true';
    isPressed = !isPressed;
    this.setAttribute('aria-pressed', isPressed);
    console.log(this.getAttribute('aria-pressed'));
  }

  let my_toggle_btn = document.getElementById('btn-my-toggle');
  my_toggle_btn.onclick = on_my_toggle_btn_click;
</script>
</html>

说明：

• ButtonFace、ButtonHighlight、ButtonShadow是CSS系统颜色，会自动跟随系统主题（比如浅色/深色模式）变化，完全不需要手动指定颜色值。
• border-style: inset和内阴影box-shadow模拟了按钮按下后的凹陷感，和浏览器默认:active状态的视觉表现一致。
• 如果你完全不想写任何CSS，那无法实现持久的按下状态——因为浏览器没有为aria-pressed预设默认样式，必须通过CSS关联属性状态和视觉表现。

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