Question

我希望用户选择一个单选按钮以使用纯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层

1 个答案: