javascript - 基础自定义选择在按钮栏内不起作用

Question

我正在尝试在我的网站中使用 Zurb Foundation 4。我正在使用 foundation 的“自定义表单”功能，它将特殊样式应用于此链接中所述的表单元素。

http://foundation.zurb.com/docs/components/custom-forms.html

我遇到的问题是 HTML 选择元素在嵌入按钮栏时不起作用。例如，下面的代码有效

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

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

<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>

我创建了一个演示问题的 JSfiddle

http://jsfiddle.net/5JbZB/4/

关于可能导致此问题的任何想法？我最初的想法是选择的下拉列表被一些覆盖深度的外部 CSS 类隐藏，但我没有运气识别出有问题的元素。

Answer 1

将此 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);

but do have in mind that your classname name should equate with the css tags. So first you will have to equate them

如果您有兴趣通过 JavaScript 制作它，请查看此链接 click here