如何根据需要设置 div（自定义单选按钮和复选框）？答案

【问题标题】：How to set a div (custom Radio-Button and Checkbox) as required?如何根据需要设置 div（自定义单选按钮和复选框）？
【发布时间】：2018-09-01 20:13:11
【问题描述】：

我想创建自定义和可访问的 Radio- 和 Checkbox-Buttons 并找到了 W3C 的不错的解决方案，使用 div 和 aria role="radio"。

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html

<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="false" tabindex="0">
   Button
   </div>
</div>

它看起来对我来说很好用，但我想将单选按钮实现为表单的必填字段。问题：在这个解决方案中没有输入元素，因此没有必要的属性可能..

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

WAI-ARIA aria-required 属性表示在提交之前需要用户输入。 aria-required 属性的值可以是“true”或“false”。例如，如果用户必须填写一个字段，则 aria-required 设置为“true”。

<div role="radiogroup" aria-labelledby="group_label_1" aria-required="true"  id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="false" tabindex="0">
   Button
   </div>
</div>

【讨论】：

【解决方案2】：

你只需要添加一个属性就可以了

aria-checked = true

首先进入任何收音机。

例如：

<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="true" tabindex="0">
   Button
   </div>

   <h3 id="group_label_2">Label2</h3>
   <div role="radio" aria-checked="false" tabindex="1">
   Button2
   </div>
</div>

【讨论】：

勾选但不是必需的

【解决方案3】：

检查W3school custom radio button 以创建自定义单选按钮。您可以将所需的属性添加到单选按钮检查以下演示代码。

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<form method="post" action="https://facebook.com" target="_blank">
<label class="container">One
  <input type="radio"  required="" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio" required="">
  <span class="checkmark"></span>
</label>

<input type="submit" value="asd" />
</form>
</body>
</html>

【讨论】：

你为什么要使用 div 有什么理由？

【解决方案4】：

您可以简单地将required 标签添加到您的输入元素。

这是一个有效的 CodePen：https://codepen.io/anon/pen/zWzaKM

【讨论】：