Foundation: custom select not clickable

The ZURB foundation responsive CSS framework works pretty fine.

Today I found out that some of the custom dropdown select boxes weren’t clickable, only when I clicked on the arrow it was displaying the options. Every browser which shows the custom forms are affected by this (Firefox, Chrome).

After some fiddling around I found out why this occurs.

The ZURB foundation responsive CSS framework is really great and I’m using it for almost every new project.

Today I found out that some of the custom dropdown select boxes weren’t clickable, only when I clicked on the arrow it was displaying the options. Every browser which shows the custom forms are affected by this (Firefox, Chrome).

After some fiddling around I found out why this occurs.

The select is pretty straight forward when using Foundation, it’s just a regular select in a form with the class custom:

<select name="select_name1" class="medium">
  <option value="0"></option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

Unfortunately the select isn’t clickable!

By replacing the first empty option the select returns clickable:

<option value="0">-- select option --</option>

The difference is the text of the first option. To understand this, it elementary to know that Foundation recreates the custom select as an unordered list with every option as a list item. An empty option turns into an empty list item. Your browser doesn’t create a box for empty items, which causes the problem.

So how to get an empty first option while still being clickable? A space will still evaluate to an empty list item, but a non-breaking-space won’t:

<select name="select_name2" class="medium">
  <option value="0">&nbsp;</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

Problem solved with a very easy solution! To see this solution in action: DEMO.

The select is pretty straight forward when using Foundation, it’s just a regular select in a form with the class custom:

<select name="select_name1" class="medium">
  <option value="0"></option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

Unfortunately the select isn’t clickable!

By replacing the first empty option the select returns clickable:

<option value="0">-- select option --</option>

The difference is the text of the first option. To understand this, it elementary to know that Foundation recreates the custom select as an unordered list with every option as a list item. An empty option turns into an empty list item. Your browser doesn’t create a box for empty items, which causes the problem.

So how to get an empty first option while still being clickable? A space will still evaluate to an empty list item, but a non-breaking-space won’t:

<select name="select_name2" class="medium">
  <option value="0">&nbsp;</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

Problem solved with a very easy solution! To see this solution in action: DEMO.

Leave a Reply

Your email address will not be published. Required fields are marked *