ionic select


ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。

实例

  1. <div class="list">
  2.  
  3.   <div class="item item-input item-select">
  4.     <div class="input-label">
  5.       Lightsaber
  6.     </div>
  7.     <select>
  8.       <option>Blue</option>
  9.       <option selected="">Green</option>
  10.       <option>Red</option>
  11.     </select>
  12.   </div>
  13.  
  14.   <div class="item item-input item-select">
  15.     <div class="input-label">
  16.       Fighter
  17.     </div>
  18.     <select>
  19.       <option>ARC-170</option>
  20.       <option>A-wing</option>
  21.       <option>Delta-7</option>
  22.       <option>Naboo N-1</option>
  23.       <option>TIE</option>
  24.       <option selected="">X-wing</option>
  25.       <option>Y-wing</option>
  26.     </select>
  27.   </div>
  28.  
  29.   <div class="item item-input item-select">
  30.     <div class="input-label">
  31.       Droid
  32.     </div>
  33.     <select>
  34.       <option>2-1B</option>
  35.       <option>B1</option>
  36.       <option>C-3PO</option>
  37.       <option>IG-88</option>
  38.       <option>IT-O</option>
  39.       <option selected="">R2-D2</option>
  40.     </select>
  41.   </div>
  42.  
  43.   <div class="item item-input item-select">
  44.     <div class="input-label">
  45.       Planet
  46.     </div>
  47.     <select>
  48.       <option>Alderaan</option>
  49.       <option selected="">Dagobah</option>
  50.       <option>Felucia</option>
  51.       <option>Geonosis </option>
  52.       <option>Hoth</option>
  53.       <option>Kamino</option>
  54.       <option>Mygeeto</option>
  55.       <option>Naboo</option>
  56.       <option>Tataouine</option>
  57.       <option>Utapau</option>
  58.       <option>Yavin</option>
  59.     </select>
  60.   </div>
  61.  
  62. </div>