输入为单选按钮标签,输入变为焦点时更改选择

时间:2018-08-06 08:10:24

标签: html css html5

我想有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>

1 个答案:

答案 0 :(得分:0)

该标签将无法像这样工作,因为文本输入将重点放在单击上。 因此,如果没有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>