纯 CSS 单选按钮显示/隐藏单独的 DIV 层

Question

我想让用户 select 使用纯 CSS 显示文本字段的单选按钮。我设计了单选按钮的样式，但无法使它们正常工作。我确信它可以完成，我想我只是没有正确输入 CSS。有人可以告诉我需要修复什么吗？

 <div class="grid-quote-full">

<div id="PreviousSalesRep" class="grid-quote-full" style="display: none;"> 
 </div>
 <label class="container">No | Non <input type="radio" checked="checked" 
 name="radio" /> 
 <span class="checkmark"></span>
 </label> 
 <label class="container2">Yes | Oui <input type="radio" name="radio" /> 
 <span class="checkmark2"></span>
 </label>

 <div id="withWhomField" class="grid-quote-full-hidden">
 <label for="Who">Name of previous Sales Rep? <span class="french">| Nom du
 représentant commercial précédent?</span></label>
 <input id="Who" name="Who" type="text" class="text-field-quote" value=""
 placeholder="Name" /></div>
 </div>

我的CSS如下：

/* Show the Text Field */
.container2 input:checked ~ .grid-quote-full-hidden{
  width: 100%;
  display: inline-block;

}


.grid-quote-full-hidden {
 display: none;

}

CSS 代码的最后一点主要是我认为不正确的部分。

Answer 1

我使用开关类型滑块从单选输入切换到复选框输入。 CSS 看起来像这样：

/* Hide expandable content by default */ 
.grid-quote-full-hidden { 
display: none; 
} 

/* Show hidden content when the checkbox is checked */ 
#expand:checked ~ * .grid-quote-full-hidden {
display: inline-block;
width: 100%; }

HTML 看起来像这样：

 <div class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="expand"> 
 <label class="onoffswitch-label" for="expand">
   <span class="onoffswitch-inner" ></span> 
   <span class="onoffswitch-switch" ></span> 
 </label> 

<table> <tbody> 
<tr class="grid-quote-full-hidden"><td> 

<div><label for="Who">Name of previous Sales Rep? <span class="french">| Nom du 
représentant commercial précédent?</span></label> <input id="Who" name="Who" 
type="text" class="text-field-quote" value="" placeholder="Name" />
</div> 

</td></tr> 
</tbody>
</table>
</div>

您可以从以下网站自定义您自己的滑块样式按钮：https://proto.io/freebies/onoff/

纯 CSS 单选按钮显示/隐藏单独的 DIV 层

Pure CSS Radio Buttons show / hide a separate DIV layer

radio-button

show-hide

pure-css