输入作为单选按钮标签，当输入获得焦点时选择会改变

Question

我希望有 2 个单选按钮，默认选项是带有文本标签的标准单选按钮，第二个选项具有输入字段作为标签。 不使用 javascript 如果输入字段获得焦点，我希望选择第二个单选。

html 如下所示：

<form method="post" action="/">
    <div class="some_style">
        <input  type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
        <label  for="radio_1">Option 1</label>
    </div>
    <div class="some_style">
        <input  type="radio" name="n2" value="v2" id="radio_2"/>
        <label for="radio_2">
            <input  name="n3" value="v3"/>
        </label>
    </div>
</form>

Answer 1

标签不会像这样工作，因为文本输入会在点击时获得焦点。 因此，如果没有 javascript，您将无法实现您想要的，我担心。

一个技巧：您可以将标签放置在输入文本上方，如果选中复选框，则将其隐藏。

但是：然后您必须单击两次才能使文本输入成为焦点。为了使这对用户合理，您例如。如果未选中复选框，则可以隐藏边框，如果选中则显示。

#mylabel {
  display: block;
  #background-color: red;
  position: relative;
  width: 200px;
  height: 2em;
  left: 2em;
  top: -2em
}

#radio_2:checked~#mylabel {
  display: none;
}
#radio_2:not(:checked)~#n3 {
  border: none;
}
label {
  cursor: pointer;
}

<form method="post" action="/">
  <div class="some_style">
    <input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
    <label for="radio_1">Option 1</label>
  </div>
  <div class="some_style">
    <input type="radio" name="n1" value="v2" id="radio_2" />
    <input name="n3" value="v3" id="n3" />
    <label for="radio_2" id="mylabel"></label>
  </div>
</form>