ionic-framework - ionic 选择无标签

Question

我在同一行中有一个 Ionic 选择作为输入，因此我想显示没有标签的选择。

代码如下:

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

显示如下:

除了明显的大小差异(我认为这是由于标签的 FONT SIZE 造成的？)。

如何让标签消失，只留下输入和选择？

如果我删除标签:

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

我得到以下信息:

更新感谢 Jess Patton 解决方案:

.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

我想我明白了，选择仍然有效并且没有标签显示。我使用了这个 html:

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

得到这个结果:

更新:我添加这个:

.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;
}

看起来像这样: