我建立了一個有6個選項的表單。選項是以按鈕的形式顯示的,所以如果用戶選擇了 "其他 "這個選項,按鈕應該轉換為文本框,用戶應該能夠輸入文本。首選CSS方法
這里是截圖- 影像在這里
預先感謝!
uj5u.com熱心網友回復:
你可以使用兄弟姐妹選擇器來做到這一點。
檢查下面的片段。
。span class="hljs-selector-tag">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"/span>
id="html"/span>
class="radio"/span>
name="fav_language"/span>
value="HTML"。
/>
<label for="html"/span>> 一</label><br />/span>
< input class="radio" type="radio" id="css" name="fav_language" value="CSS" />
<label for="css"/span>> 兩個</label><br />
< input class="radio" type="radio" id="Three" name="fav_language" value="Three" />。  。
<label for="Three"/span>> Three</label><br />/span>
< input class="radio" type="radio" id="javascript" name="fav_language" value="JavaScript" />
<label for="javascript"/span>> Other</label>
<br />/span>
< input type="text" id="other-text" placeholder="Other" />
</form>
<iframe name="sif1" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
EDIT
其他按鈕一旦被點擊將被替換為textbox。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/309056.html
標籤:
下一篇:如何將nii影像轉換為2D影像?
