离子选择无标签

Question

我在输入的同一行中有一个离子选择，因此我想显示没有标签的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>

显示如下：

除了明显的尺寸差异（我假设是由于标签的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;
}

看起来像这样：

Answer 2

只需删除“item-input”类和输入标签部分即可。然后，设置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

以下是适用于Ionic v1的CSS：

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