Style a select and options elements with multiple columns.

Question

I'm using google translate selects as a reference.

When you click to choose the languages the options shows with multiple columns.

http://translate.google.com/

How can I do that ?

Answer 1

That's not a real SELECT element. Think of it as a popin triggered by clicking on a DIV. Look at it in Firebug to see how they do it.

Edited to show the OP that, no, it's really not a SELECT element. This is the markup of the first "SELECT" on the page. Do you see any SELECT element in there? I sure don't.

<div class="goog-inline-block goog-menu-button" title="Detect language" style="-webkit-user-select: none; " tabindex="0">
  <div class="goog-inline-block goog-menu-button-outer-box">
    <div class="goog-inline-block goog-menu-button-inner-box">
      <div class="goog-inline-block goog-menu-button-caption" style="overflow-x: hidden; overflow-y: hidden; ">
        Detect language
      </div>
      <div class="goog-inline-block goog-menu-button-dropdown">
        ▼
      </div>
    </div>
  </div>
</div>