web-dev-qa-db-ja.com

ionic 2コンポーネントからボトムラインを削除する方法

![enter image description here

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

画像に表示されている白い線を削除しますが、削除できません。この問題を克服するための提案はありますか

cssionic-frameworkionic2ionic3
10
Dms Malith Disanayake

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; 
}
10
sebaferreras

no-lines in ion-item。以下のように

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

16
Shahab Rauf

これで、lines = "none"を追加できます。

例：

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

差出人： https://ionicframework.com/docs/api/item

3
Switch900

<ion-item></ion-item>内の要素<ion-list inset></ion-list>。必ずinsetプロパティをイオンリストに含めてください。

1
Ravi Rajindu

ionicこのソリューションは正常に機能しています

 .item-inner {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }
0
Péttrin Miranda