html - 如何在不使用单选按钮或复选框的情况下将是/否答案编程为 HTML 表单中的按钮？

Question

如何在网络表单中编写以下程序:

你是男的还是女的？

Answer 1

您可以模拟使用单选按钮的标签。

input[type="radio"] {
    display: none;
}

label {
  padding: 10px 20px;
  background-color: orange;
  border: thin solid darkorange;
  border-radius: 10px;
  margin:5px;
  display: inline-block;
}

input[type="radio"]:checked + label {
    background-color: darkblue;
    cursor: default;
    color: #E6E6E6;
}

<input id="toggle-on" name="toggle" type="radio">
<label for="toggle-on">On</label>
<input id="toggle-off" name="toggle" type="radio">
<label for="toggle-off">Off</label>