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

Question

如何在webform中编写以下内容:

你是男性还是女性？

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>