如何使用 CSS 在单击时将按钮转换为文本框？

Question

我构建了一个包含 6 个选项的表单。选项以按钮的形式显示，因此如果用户选择“其他”选项，按钮应转换为文本框，用户应该能够输入文本。 CSS 首选方法

这是截图- image is here

image after click

提前致谢！

Answer 1

您可以使用兄弟选择器来做到这一点。

检查以下代码段。

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>

编辑

单击后“其他”按钮将替换为 textbox。

如何使用 CSS 在单击时将按钮转换为文本框？

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

css

forms

gravityforms