HTML select标签:桌面与移动

时间:2012-10-29 01:53:49

标签: android css mobile select drop-down-menu

我注意到在我的Android浏览器上,当我选择其他网站似乎为他们的选择菜单设置了自定义CSS时,一些下拉菜单会给我标准的Android弹出窗口。

一个例子是http://carwoo.com/

如果我访问该网站的移动版本,它会为我提供我在移动浏览器上预期的默认下拉菜单。当我在手机上请求该网站的桌面版本时,我发现自定义下拉列表更难以导航。

我的问题是select标签的哪些属性对此负责?在编辑样式表时,如何确保在移动设备上获取默认选择菜单?

1 个答案:

答案 0 :(得分:1)

该网站上的自定义下拉菜单不是选择标记,而是多个ul

<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>

您制作的常规select应使用设备的浏览器标准下拉列表。