1

我想让用户选择一个单选按钮来使用纯 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代码主要是我认为我不正确的地方。

4

1 回答 1

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/

于 2018-08-07T18:45:32.327 回答