如何从离子2组分中去除底线

Question

我正在使用离子2。 我需要从输入字段中删除底部的白线。 这是我的addVehicle.html页面，

1 -> 0
2 -> 0
3 -> 1
4 -> 1
5 -> 1
6 -> 2
7 -> 2
8 -> 2
9 -> 3

我用过

<form [formGroup]="addCustomerForm" (ngSubmit)="onSubmit(addCustomerForm)">
<ion-item class="ion-card">
  <ion-input type="text" placeholder="Owner Name" class="ion_input" formControlName="vehicle_cust_name" name="vehicle_cust_name"></ion-input>
  <ion-icon name="person-add" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Vehical No" formControlName="vehicle_no" name="vehicle_no"></ion-input>
  <ion-icon name="car" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Tel No 1" formControlName="vehicle_cust_tel1" name="vehicle_cust_tel1"></ion-input>
  <ion-icon name="call" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Tel No 2" formControlName="vehicle_cust_tel2" name="vehicle_cust_tel2"></ion-input>
  <ion-icon name="call" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Address" formControlName="vehicle_cust_address" name="vehicle_cust_address"></ion-input>
  <ion-icon name="navigate" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Engine No" formControlName="vehicle_engine_no" name="vehicle_engine_no"></ion-input>
  <ion-icon name="construct" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-input type="text" class="ion_input" placeholder="Chassis No" formControlName="vehicle_chassis_no" name="vehicle_chassis_no"></ion-input>
  <ion-icon name="build" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-select class="ion_input" placeholder="Brand ID" formControlName="vehicle_vehicle_brand_id" [(ngModel)]="vehicle_vehicle_brand_id"
    multiple="false">
    <ion-option *ngFor="let brandId of brandIds.brand" [value]="brandId.brand_id">{{brandId.brand_name}}</ion-option>
  </ion-select>
  <ion-icon name="code" class="ion_icon" item-left small></ion-icon>
</ion-item>
<ion-item class="ion-card">
  <ion-select class="ion_input" placeholder="Type" formControlName="vehicle_vehicle_models_id" [(ngModel)]="vehicle_vehicle_models_id"
    multiple="false" (ionChange)="modelChanged(vehicle_vehicle_models_id)">
    <ion-option *ngFor="let loadModel of loadModels.types" [value]="loadModel.models_id">{{loadModel.models_name}}</ion-option>
  </ion-select>
  <ion-icon name="code-working" class="ion_icon" item-left small></ion-icon>
</ion-item>
<button ion-button color="primary_btn" type="submit" [disabled]="!addCustomerForm.valid" block>
    Add Vehicle
    </button>
<button ion-button color="secondary_btn" type="button" (click)="cancleClick()" block>
    Cancel
    </button>

这是我的.css

$text-input-md-highlight-color:false;

删除图片显示的白线。但是我无法将其删除。是否有建议要克服这个问题呢？

Answer 1

只需在no-lines中加入ion-item即可。就像下面一样

<ion-item no-lines></ion-item>

Answer 2

似乎没有办法通过使用Ionic Sass属性来删除它。话虽这么说，我们可以通过使用一些css样式规则来删除它：

.item-md.item-block .item-inner,
.item-md.item-input.input-has-focus .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner,
.list-md .item-input.input-has-focus:last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
    border-bottom: none;
    box-shadow: none;
}
.list-md .item-input.input-has-focus:last-child .item-inner,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child .item-inner {
    box-shadow: none; 
}

Answer 3

您现在可以只添加行=“ none”。

示例：

<ion-item class="ion-card" lines="none">

发件人： https://ionicframework.com/docs/api/item

Answer 4

只需在<ion-item></ion-item>中添加<ion-list inset></ion-list>个元素即可。确保将inset属性包含在离子列表中。

Answer 5

在 ionic 3 上，此解决方案工作正常

 .item-inner {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

Answer 6

在离子输入中添加一个类并在该类中应用“文本修饰：无”样式对我有用

Answer 7

您可以使用包裹的ion_input定位课程.md,.ios,.wp，如此

.md,.ios,.wp{
     .ion_input{
         border-bottom: none;
         box-shadow: none;
     }
}

使用这些目标类进行包装会覆盖任何离子基本样式。