2

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!

TechieInprogress
  • 33
  • 5

1 Answers1

2

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.

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
  • Thanks for your answer! I am able to implement this feature but i want to replace "Other" button with the textbox when clicked. I have added a screenshot of the expected result in the updated post , please have a look. – TechieInprogress Sep 11 '21 at 14:20
  • Ok, So that button won't be there once clicked, instead it will be textbox, right ? – Abin Thaha Sep 11 '21 at 14:27
  • @TechieInprogress, I have updated your requirement in the snippet. Check and let me know – Abin Thaha Sep 11 '21 at 14:34