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

Question

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>

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>