使用单选输入通过 CSS 使 div 可见答案

【问题标题】：Use a radio input to make a div visible with CSS使用单选输入通过 CSS 使 div 可见
【发布时间】：2018-09-16 19:34:02
【问题描述】：

我想使用单选输入使 div 在被选中时可见。这是我所拥有的，但它不起作用。

HTML：

<input type="radio" name="menu" id="btn_commandprompt" value="1"></input>
                <label for="btn_commandprompt"">
                    <div id="btn_commandprompt_design"></div>
                </label>

<div id="commandprompt"></div>

CSS：

    #commandprompt{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}


#btn_commandprompt:checked ~ #commandprompt{
    display: block;
}

谢谢

【问题讨论】：

它适用于我：codepen.io/AugustinF/pen/JLeoON 您使用的是哪个浏览器？或者您正在寻找一个特定的案例？
是的，您的代码有效。我的答案是另一种选择。
你是对的 O_o 它在这里工作：codepen.io/brochard/pen/xWQbQL 但它在我的项目中不起作用：codepen.io/brochard/pen/VXVYgd 你知道为什么吗？

标签： css input radio-button visible

【解决方案1】：

I have modify your code. its now working...


  <style>
   #commandprompt{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}


#btn_commandprompt:checked ~ #commandprompt{
    display: block;
}
  </style>

<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1"> Show Me</input>
<input type="radio" name="menu" id="btn_acceuil" value="1"> Hide Me</input>

<div id="btn_commandprompt_design"></div>

<div id="commandprompt">ooh!!</div>
</body>

【讨论】：

谢谢 :) 现在我必须找出为什么它在我的项目中不起作用^^

【解决方案2】：

this should work


<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1" onclick="show()"> Click Me</input>
<div id="btn_commandprompt_design"></div>

<div id="commandprompt" style="display:none">Show Me</div>
</body>


<script>


function show(){
  document.getElementById("commandprompt").style.display = 'block';
}


</script>

【讨论】：

嗨，谢谢你的回答，但我想用 CSS 来做，我使用无线电输入，所以当我选择其他答案时，我希望 div 消失，有人帮我让它工作这里codepen.io/brochard/pen/xWQbQL 但它在我的项目codepen.io/brochard/pen/VXVYgd 中不起作用如果你能帮我找出为什么它会很棒:)
由我决定，我试过没有连接它可以工作，尝试重新加载页面。（编辑：你错过了 URL 末尾的一个字母）
好的，看看。刚刚添加了另一个答案。如果您正在寻找答案，请为答案投票。
好的，看看。刚刚添加了另一个答案。如果您正在寻找答案，请为答案投票。

【解决方案3】：

如果你在 Div 里面放一些东西就可以了。您的代码是正确的，例如，只需在您的 Div 中添加一个段落，然后再试一次。

【讨论】：