I'm currently incorporating Zurb Foundation 4 into my website and using the "custom forms" feature for special styling on form elements. The issue I'm facing is that HTML select elements aren't functioning properly when placed inside a button bar. For instance, this code works fine:
<form class="custom">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</form>
However, embedding the same code within a button group like this doesn't work:
<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>
I've set up a JSfiddle to showcase the issue:
If anyone has any insights on what might be causing this problem, please let me know. My initial suspicion was that a CSS class from an outer element might be hiding the select dropdown by overriding the depth, but I haven't been able to pinpoint the exact cause.