Javascript 基础自定义选择不在按钮栏内工作 我试图在我的网站上使用Zurb基金会4。我使用基金会的“自定义表单”特性，它使用特殊样式来形成这个链接中描述的元素。

我遇到的问题是，HTML select元素在嵌入按钮栏时不起作用。例如，下面的代码可以工作

<form class="custom">
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
 </form> 

选择1
选择2

但是嵌入在按钮组中的相同代码不起作用

<div class="button-bar">
<ul class="button-group">
            <li>
                <form class="custom">
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </form>
            </li>
</ul>
</div>

选择1
选择2

我创建了一个JSFIDLE来演示这个问题

你知道是什么导致了这一切吗？我最初的想法是，select的下拉列表被一些覆盖深度的外部CSS类隐藏，但我没有发现有问题的元素。

简单地像这样尝试（）：

带有Zurb Foundation自定义选择的按钮栏
选择1
选择2

只需像这样尝试（）：

带有Zurb Foundation自定义选择的按钮栏
选择1
选择2

在css框中包含此css。这应该可以完成工作。

/* We use these to controls height and width styles. */
$f-dropdown-max-width: 200px;
$f-dropdown-height: auto;
$f-dropdown-max-height: none;
$f-dropdown-margin-top: 2px;

/* We use this to control the background color */
$f-dropdown-bg: #fff;

/* We use this to set the border styles for dropdowns. */
$f-dropdown-border-style: solid;
$f-dropdown-border-width: 1px;
$f-dropdown-border-color: darken(#fff, 20%);

/* We use these to style the triangle pip. */
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: #fff;
$f-dropdown-triangle-side-offset: 10px;

/* We use these to control styles for the list elements. */
$f-dropdown-list-style: none;
$f-dropdown-font-color: #555;
$f-dropdown-font-size: emCalc(14px);
$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
$f-dropdown-line-height: emCalc(18px);
$f-dropdown-list-hover-bg: #eeeeee;
$dropdown-mobile-default-float: 0;

/* We use this to control the styles for when the dropdown has custom content. */
$f-dropdown-content-padding: emCalc(20px);

但请记住，您的类名应该与css标记相等。因此，首先您必须将它们等同起来

---

如果您有兴趣通过JavaScript制作此链接，请选中此链接。将此css包含在css框中。这样就可以了。

/* We use these to controls height and width styles. */
$f-dropdown-max-width: 200px;
$f-dropdown-height: auto;
$f-dropdown-max-height: none;
$f-dropdown-margin-top: 2px;

/* We use this to control the background color */
$f-dropdown-bg: #fff;

/* We use this to set the border styles for dropdowns. */
$f-dropdown-border-style: solid;
$f-dropdown-border-width: 1px;
$f-dropdown-border-color: darken(#fff, 20%);

/* We use these to style the triangle pip. */
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: #fff;
$f-dropdown-triangle-side-offset: 10px;

/* We use these to control styles for the list elements. */
$f-dropdown-list-style: none;
$f-dropdown-font-color: #555;
$f-dropdown-font-size: emCalc(14px);
$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
$f-dropdown-line-height: emCalc(18px);
$f-dropdown-list-hover-bg: #eeeeee;
$dropdown-mobile-default-float: 0;

/* We use this to control the styles for when the dropdown has custom content. */
$f-dropdown-content-padding: emCalc(20px);

但请记住，您的类名应该与css标记相等。因此，首先您必须将它们等同起来

---

如果您有兴趣通过JavaScript创建此链接，请查看此链接。

您可能应该看到以下两个链接：：

---

通过

---

---

您可能应该看到以下两个链接：：

---

通过

---

发生的事情是按钮组UL和LI比您预期的要小。自定义表单选择元素有100%的宽度，但是由于按钮栏的UL和LI比100%宽度小得多，如果我没记错的话，那么您的选择将只有100%的宽度

如果你在下面添加css，你应该很好去做。如果您计划在其他地方使用按钮组，您可以添加另一个类来执行相同的操作

.button-group {
    width:100%;
}
.button-group li {
    width:100%;
}

---

发生的事情是按钮组UL和LI比您预期的要小。自定义表单选择元素有100%的宽度，但是由于按钮栏的UL和LI比100%宽度小得多，如果我没记错的话，那么您的选择将只有100%的宽度

如果你在下面添加css，你应该很好去做。如果您计划在其他地方使用按钮组，您可以添加另一个类来执行相同的操作

.button-group {
    width:100%;
}
.button-group li {
    width:100%;
}

---

我不敢相信我错过了这一点，但这里有一个更好的解决方案

.button-group .custom.dropdown{
  overflow:visible;
}

---

我不敢相信我错过了这一点，但这里有一个更好的解决方案

.button-group .custom.dropdown{
  overflow:visible;
}

---

这适用于下拉列表，但我需要将我的选择放在“按钮组”内，因为它将与其他一些元素组合。这适用于下拉列表，但我需要将我的选择放在“按钮组”内，因为它将与其他一些元素组合。提示不完整。包括您正在使用的css。问题在CSS中。问题已完成。CSS作为外部资源加载到fiddle链接中。除了标准基础框架下载所提供的以外，我没有任何CSS。在投票否决这个问题之前，请学会使用小提琴。我想问题可能是谷歌浏览器。根据控制台，它拒绝从GITHUB执行基础脚本，因为它的“MIME类型（“文本/平原”）是不可执行的，并且严格的MIME类型检查是启用的。”小提琴在我的Firefox上工作得很好。@ StLARARCARIOT-我已经从CDN而不是GITHUB更新了脚本。它现在应该可以在所有浏览器上运行。谢谢提醒我这个问题。问题不完整。包括您正在使用的css。问题在CSS中。问题已完成。CSS作为外部资源加载到fiddle链接中。除了标准基础框架下载所提供的以外，我没有任何CSS。在投票否决这个问题之前，请学会使用小提琴。我想问题可能是谷歌浏览器。根据控制台，它拒绝从GITHUB执行基础脚本，因为它的“MIME类型（“文本/平原”）是不可执行的，并且严格的MIME类型检查是启用的。”小提琴在我的Firefox上工作得很好。@ StLARARCARIOT-我已经从CDN而不是GITHUB更新了脚本。它现在应该可以在所有浏览器上运行。感谢您提醒我这个问题。我已经在fiddle中添加了所需的CSS和Javascript文件。单击JSFIDLE左侧的“外部资源”选项卡，查看加载的文件。如果没有这些文件，第一个示例将无法工作！我已经在fiddle中添加了所需的CSS和Javascript文件。单击JSFIDLE左侧的“外部资源”选项卡，查看加载的文件。如果没有这些文件，第一个示例将无法工作！试过你的例子，但对我不起作用。你用的是哪个浏览器？我在IE9、Chrome 27和Safari 6中试过，你能检查一下我刚才添加到答案中的图像，看看这是否是你期望看到的，以及这是否是你在fiddler中看到的吗