如何从离子 2 组件中删除底线

Question

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

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

我用过

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

这是我的。css

.ion-card{
background-color: #101218;
border: 1px solid #4A4A4A;
margin:20px auto;
border-radius: 10px !important;
}
.ion_input{
color:#f4f4f4;
opacity: 0.6;
}
.ion_icon{
color:#f4f4f4;
opacity: 0.6;
font-size: 5px;
}
.home_back{
 background-color: #15161D;
}
.item-inner, ion-item {
 border-bottom-color: transparent !important;
 box-shadow: none !important;
 }

删除图片显示的那条白线 you.But 我无法删除 it.Is 大家有解决这个问题的建议

Answer 1

似乎没有办法通过使用 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 2

您可以像这样 class ion_input 用包装的 .md,.ios,.wp 定位

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

用这些目标包裹 classes 会覆盖任何离子基础样式。

Answer 3

只需将您的 <ion-item></ion-item> 元素包含在 <ion-list inset></ion-list> 中。确保将 inset 属性包含到离子列表中。

Answer 4

只需将 no-lines 包含在 ion-item 中。如下图

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

Answer 5

在 ionic 3 上，此解决方案运行良好

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

Answer 6

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

示例：

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

来自： https://ionicframework.com/docs/api/item

Answer 7

在 ion-input 中添加 class 并应用“text-decoration: none”样式 class 对我有用

如何从离子 2 组件中删除底线

How to remove bottom line from the ionic 2 components

css

ionic-framework

ionic2

ionic3