1

我现在正在为我的第一个项目使用基础，我真的很喜欢它提供的开箱即用的功能，但是我的自定义收音机盒子有问题。

这个想法不仅是在单选按钮标签内包含文本，而且还有图像和一些粗体文本。一旦我开始在标签内使用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 选择器没有考虑标签内的额外标签。

有没有办法让这个工作与基础一起工作，还是我必须求助于解决方法（使整个文本加粗并将图像放在标签之外）？

4

1 回答 1

1

好问题，当我需要通过 F4 的自定义表单实现创建自定义表单时，我遇到了和你一样的问题。

如果您查看实现（custom.forms.scss），您可以看到他们使用:beforeandcontent: ""来实现这一点。我怀疑这就是为什么你不能在之后添加任何标签<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> &nbsp;
于 2013-10-10T19:32:38.817 回答