输入为单选按钮标签，当输入获得焦点时，选择会发生变化

Question

我想要两个单选按钮，默认选项是一个带文本标签的标准单选按钮，第二个选项有一个输入字段作为标签在不使用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>