Question

I have noticed on my android browser that some drop-down menus give me the standard android pop up when I select and other sites seem to have a custom CSS set up for their select menus.

One example is http://carwoo.com/

If I go to the mobile version of the site it gives me the default drop-down I would expect on my mobile browser. When I request the desktop version of the site on my phone I see a custom drop-down that is much harder to navigate.

My question is what properties of the select tag are responsible for this? How can I be sure that I will get the default select menu on a mobile device when I am editing my style sheet?

Answer 1

The custom drop-down on that site isn’t a select tag, but several uls:

<li id="makes_drop_down" class="droppable">
  <div id="make_name" class="selection">Select Make</div>
  <div class="arrow">▼</div>
  <div class="drop-down" style="display: block; ">
    <div class="spanner"></div>
    <ul class="drop-down-items">
      <li class="grouped-drop-down-items">
        <ul>
         <li class="drop-down-item"><a href="#" data-make-id="80000001">Acura</a></li>
         ...
        </ul>
      </li>
      <li class="grouped-drop-down-items">
        <ul>
          <li class="drop-down-item"><a href="#" data-make-id="80000015">GMC</a></li>
          ...
         </ul>
      </li>
      <li class="grouped-drop-down-items">
        <ul>
         <li class="drop-down-item"><a href="#" data-make-id="80000002">MINI</a>
         ...
        </ul>
      </li>
    </ul>
  </div>
</li>

Any regular select that you make should use the device’s browser’s standard drop-down.