Clash Royale CLAN TAG#URR8PPP

input as radio button label with selection changing when input gets focus

I would like to have 2 radio buttons with the default option being a standard radio button with a text label, and the second option having an input field as the label. Without using javascript I wish to have the second radio be selected if the input field receives focus.

The html looks like the following:

<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>


Without using javascript

1 Answer
1

The label will not work like this because the text input receives the focus on click.
So, without javascript you will not be able to achieve what you want I fear.

One trick: You could position the label above the input text and hide it if the checkbox is checked.

But: You will then have to click twice to give the text input the focus. To make this reasonable to the user, you eg. could hide the border if the checkbox is unchecked and show it if checked.

#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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.