我现在正在为我的第一个项目使用Foundation，我真的很喜欢它提供的即装即用功能，但是我在使用自定义收音机盒时遇到了麻烦。
这个想法不仅是在单选按钮标签中包含文本，而且还要包含图像和一些粗体文本。一旦我开始在标签内使用img或粗体标签，通过标签文本进行的单选按钮选择就会中断。
我正在使用的代码是这个
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
这样，只能通过直接单击来选择单选框，单击文本或图像会导致选择不正确，看来基础JS选择器并没有考虑标签内的多余标签。
有没有一种方法可以使此基础工作，还是我必须求助于变通方法（将整个文本加粗并在标签外放置图像）？
很好的问题，当我需要通过F4的自定义表单实现创建自定义表单时，遇到了与您相同的问题。
如果查看实现（custom.forms.scss），您会发现它们使用:before和content: ""来实现此目的。我怀疑这就是为什么您不能在<span class="custom radio"></span>
现在，您可以做的一种解决方法是将自定义元素等放置在<span>元素中。这将很好地工作，但由于宽度和高度很小，因此看起来会很奇怪。但是从那时起，只需对其样式进行设置，直到获得所需的外观即可。这是一个使用绝对定位的非常简单的示例：
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句