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

Question

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

Answer 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