How to convert button to text box on click using CSS?

Question

I have built a form with 6 options. Options are displayed in the form of buttons so if user selects the option "Other", the button should convert into a textbox and the user should be able to enter the text. CSS method preferred

Here is the screenshot- image is here

image after click

Thanks in advance!

Answer 1

You can use sibling selector to do that.

Check the below snippet.

form {
  display: flex;
}

#other-text {
  display: none;
}

#javascript:checked + label {
  visibility: hidden;
  width: 0;
  display: inline-block;
  opacity: 0;
}

#javascript:checked ~ #other-text {
  display: block;
}

.radio {
  visibility: hidden;
}

label {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.radio:checked + label {
  background-color: #ddd;
}

<form>
   
  <input
    type="radio"
    id="html"
    class="radio"
    name="fav_language"
    value="HTML"
  />
    <label for="html">One</label><br />
    <input class="radio" type="radio" id="css" name="fav_language" value="CSS" />  
  <label for="css">Two</label><br />
     <input class="radio" type="radio" id="Three" name="fav_language" value="Three" />  
  <label for="Three">Three</label><br />

  <input class="radio" type="radio" id="javascript" name="fav_language" value="JavaScript" />
    <label for="javascript">Other</label>

  <br />
  <input type="text" id="other-text" placeholder="Other" />
</form>

EDIT

The Other button will be replaced with textbox once clicked.