我在同一行中有一个 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>
显示如下:
除了大小上的明显差异(我认为这是由于标签的字体大小所致?)。
如何消失标签,只留下输入和选择?
如果我删除标签:
<div class="input-label">G</div>
我得到以下信息:
Update感谢 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:
更改输入填充不是一个选项,因为它是较大表单的一部分。
我想我明白了,选择仍然有效并且没有标签显示。
我用了这个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: 我补充一下:
.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;
}
看起来像这样:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)