離子選擇無標籤

Question

我有一個Ionic選擇與輸入相同的行，因此我想顯示沒有標籤的SELECT。

的代碼如下：

<ion-list> 
     <div class="row"> 
     <div class="col no-padding"> 
      <label class="item item-input"> 
      <input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required> 
      </label> 
     </div> 
     <div class="col no-padding"> 
      <label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id"> 
      <div class="input-label">G</div> 
      <select ng-model="registro.tipo_id"> 
       <option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option> 
      </select> 
      </label> 
     </div> 
     </div> 
</ion-list> 

它顯示如下：

除了在尺寸上顯着性差異（我假定是由於所述標記的字體大小？）。

我該如何消除標籤，只留下輸入和選擇？

如果我刪除標籤：

<div class="input-label">G</div> 

我得到如下：

更新 由於傑斯巴頓的解決方案：

.item-select select { 
    -moz-appearance: none; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    padding: 0px 45px 0px 0px; 
    max-width: 100%; 
    border: medium none; 
    background: #FFF none repeat scroll 0% 0%; 
    color: #333; 
    text-indent: 0.01px; 
    text-overflow: ""; 
    white-space: nowrap; 
    font-size: 14px; 
    cursor: pointer; 
    direction: rtl; 
} 

和改變的HTML：

<label class="item item-select" name="tipo_id" ng-model="registro.tipo_id"> 

我得到以下結果：

它是更接近所需要的結果，但仍然是大小的區別是令人擔憂的，不值得部署。

更新2：

改變輸入填充是不是一種選擇，因爲它是一個較大形狀的一部分。

Answer 1

想想我明白了，選擇仍然有效，並顯示沒有標籤。 我用這個網站：

<div class="item item-select"> 
    <select> 
     <option>Blue</option> 
     <option selected>Green</option> 
     <option>Red</option> 
    </select> 
    </div> 

這個CSS：

.item-select select { 
    -moz-appearance: none; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    padding: 0px 45px 0px 0px; 
    max-width: 100%; 
    border: medium none; 
    background: #FFF none repeat scroll 0% 0%; 
    color: #333; 
    text-indent: 0.01px; 
    text-overflow: ""; 
    white-space: nowrap; 
    font-size: 14px; 
    cursor: pointer; 
    direction: rtl; 
} 

得到這個結果：

UPDATE：我補充一點：

.item-select { 
    height: 100%; 
} 

，並得到這個：

更新2：終於獲得了CSS權： /*這裏樣式*/

.item-select select { 
    -moz-appearance: none; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    padding: 0px 45px 0px 0px; 
    max-width: 100%; 
    background: #FFF none repeat scroll 0% 0%; 
    color: #333; 
    text-indent: 0.01px; 
    text-overflow: ""; 
    white-space: nowrap; 
    font-size: 14px; 
    cursor: pointer; 
    direction: rtl; 
} 
.item-select { 
    height: 100%; 
    padding: 0 0 0 0; 
    margin: 0 0 0 0; 
} 
.item-input{ 
    padding: 0 0 0 0; 
} 

如下：

Answer 2

只需刪除「項目輸入」類和輸入標籤部分。然後，設置style =「max-width：100％」來選擇，

<label class="item item-select select_input"> 
    <select ng-model="s.selected" style="max-width: 100%"> 
     <option value="">None</option> 
     <option ng-repeat="item in items"> 
      {{ item }} 
     </option> 
    </select> 
</label> 

希望！它可能有助於某人。

Answer 3

下面是在離子V1對我的作品的CSS：

.item-select select { 
    max-width: 100%!important; 
    width: 100%!important; 
    right: auto!important; 
    direction: ltr!important; 
    padding-left: 0!important; 
}