使用无线电输入使 div 可见 CSS

Question

我想使用无线电输入使 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;
}

谢谢

Answer 1

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>

Answer 2

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

Answer 3

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>

使用无线电输入使 div 可见 CSS

Use a radio input to make a div visible with CSS

css

input

radio-button

visible