离子选择无标签 [英] Ionic select no label

问题描述

我在输入的同一行中有一个离子选择，因此我想显示没有标签的SELECT。

I have an Ionic select in the same row as an input, therefore I want to show the SELECT without a label.

代码如下：

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

显示如下：

< img src =https://i.stack.imgur.com/gZUxC.pngalt =在此处输入图像说明>

除了明显的尺寸差异外（我假设是由于标签的FONT SIZE？）。

Besides the obvious difference in size (which I assume is due to the FONT SIZE of the label?).

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

How do I disappear the label, leaving just the input and the select?

如果我删除标签：

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

我得到以下信息：

< img src =https://i.stack.imgur.com/968qn.pngalt =在此输入图像说明>

更新
感谢Jess Patton解决方案：

Update Thanks to Jess Patton solution:

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

我得到以下结果：

它更接近于所需的结果，但仍然是大小的差异是令人担忧的，不值得部署。

It is much closer to the needed result, but still the difference in sizes are worrisome and not worthy for deployment.

更新2：

更改输入填充不是一个选项，因为它是更大形式的一部分。

Changing the input padding isn't an option as it is part of a larger form.

推荐答案

想想我得到它，选择仍然有效，并显示没有标签。
我用过这个html：

Think I got it, the select still works and is shown with no label. I used this 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;
}

得到这个结果：

更新 ：我添加：

UPDATE: I add this:

.item-select {
  height: 100%;
}

并得到：

更新2： 最后得到了css：
/ *样式在这里* /

UPDATE 2: Finally got the css right: /* Styles here */

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

看起来像这样：

这篇关于离子选择无标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！