how to theme select box drupal for css framework

Question

I am making a theme using semantic ui framework in drupal. I want to apply semantic ui select box effect to my theme but i was not able to do this. Here is the link for semantic ui select box http://semantic-ui.com/collections/form.html.

They used this for markup select box.

<div class="ui selection dropdown" style="display: inline-block;">
      <input type="hidden" name="gender">
      <div class="default text">Gender</div>
      <i class="dropdown icon"></i>
      <div class="menu ui transition hidden">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
      </div>
</div>

But the standard markup for select box is:

<select id="edit-date-month" name="date[month]" class="form-select">
<option value="1" selected="selected">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
</select>

How can i apply semantic ui select effect to my drupal theme. Any help would be appreciated.

Answer 1

You need to override theme_select(), which you can do in your theme's template.php file:

function MYTHEME_select($vars) {
  // Your code to produce the markup you need. You can find all pertinent data in $vars.
  // The original form element is at $vars['element'], so the options array is at 
  // $vars['element']['#options'].
}