使用按钮 HTML 元素实现自定义复选框答案

【问题标题】：Using button HTML element for implementing custom checkbox使用按钮 HTML 元素实现自定义复选框
【发布时间】：2022-08-05 20:51:40
【问题描述】：

使用<button> 元素代替<input type=\"checkbox\" /> 是否可行？它会破坏可访问性或以任何方式影响用户体验吗？据我所知，我们丢失了元素的值和 onChange 回调，但这在 React 中很容易解决。如果有人想知道，使用的原因将是更容易定制（样式）。

或者只是将复选框设置为看起来像一个按钮。可以使标签看起来像一个按钮。
我同意上面的评论将复选框设置为按钮的样式，但是如果您真的想将按钮自定义为复选框，您可以使用ARIA Roles，尽管首选本机元素。

标签： javascript html forms input

【解决方案1】：

为了尊重可访问性 (a11y)，如果您希望自定义一个复选框，您可以使用任何东西，但您必须使用隐藏但真实的 <input type="checkbox" /> 映射到您的 change 事件。

这是从以下来源获取的示例。

html {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
  border-radius: 50%;
}

/*radio pseudo element styles*/
.wrapper input + label::after {
  content: "";
  opacity: 0;
  border: 10px solid;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
  transition: opacity 0.2s ease-in-out;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles*/
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;  
  outline: 3px solid transparent; /* For Windows high contrast mode. */
}

<form>
  <fieldset>
    
    <legend>
      <h3>What type of accessibilty issues do you see most often?</h3>
    </legend>

    <div class="wrapper">
      <input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
      <label for="a11y-issue-1">There are no issues</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
      <label for="a11y-issue-2">Focus styles are not present</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
      <label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
    </div>
    
  </fieldset>
</form>

来源：https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

【讨论】：