我正在尝试在我的网站中使用 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
关于可能导致此问题的任何想法?我最初的想法是选择的下拉列表被一些覆盖深度的外部 CSS 类隐藏,但我没有运气识别出有问题的元素。
最佳答案
将此 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
关于javascript - 基础自定义选择在按钮栏内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17156938/