想要为ngb-tabset添加ul和活动类样式的自定义样式,需要删除边框并仅在底部应用边框 .
所以请帮助您了解如何更新ngb-tabset的默认样式 . 可以更新ngbtabset Angular 6的样式 .
<div class="custom-tabs">
<ngb-tabset #tabset="ngbTabset">
<ngb-tab [id]="tab.id" *ngFor="let tab of tabs;let i = index;">
<ng-template ngbTabTitle>
{{tab.title}}{{applicantNumberArray[i - 1]}}
</ng-template>
<ng-template ngbTabContent>
<div style="margin-top:100px;">
<form [formGroup]="personalInfo" novalidate>
<div formArrayName="personalDetails" *ngFor="let field of personalInfo.get('personalDetails').controls; let index = index;">
<div class="row clear" [formGroupName]="index" *ngIf=" i === index">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 formgroup1" style="padding-left: 0px; padding-right: 0px;">
<div class="row" style="margin-left: 0px;margin-right: 0px;">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">First Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="firstName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Full Middle Name*</label>
</div>
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<input type="text" class="form-control" formControlName="fullMiddleName">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin-top: 9px;">
<div class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Last Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="lastName">
</div>
</div>
<div class="row" style="margin-left:0px;margin-right:0px;">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2">
<label class="pull-right">Suffix</label>
</div>
<div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
<select class="form-control small-selectbox" id="sel1" formControlName="suffix">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2">
<label class="pull-right">Gender*</label>
</div>
<div class="col-md-10 col-sm-10 col-xs-2 col-lg-10">
<select class="form-control small-selectbox" id="sel1" formControlName="gender">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 formgroup2">
<div class="row">
<div class="col-md-6">
<label class="pull-right">Maiden Name</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" formControlName="maidenName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Driver License #</label>
</div>
<div class="col-md-6">
<select class="form-control small-selectbox" id="sel1" formControlName="gender">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Driver License State</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" formControlName="licenseState">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 formgroup3" style="padding-right:60px;">
<div class="row">
<div class="col-md-6">
<label class="pull-right">Home Phone</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" formControlName="homePhone">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Mobile Phone*</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" formControlName="mobile">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">SSN/SIN</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" formControlName="ssn">
</div>
</div>
<div class="row">
<div class="col-md-6"><label class="pull-right">Date of Birth*</label></div>
<div class="col-md-6">
<div class="input-group">
<input class="form-control" name="dp" ngbDatepicker #d="ngbDatepicker" formControlName="dob">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"><i class="fa fa-calendar-o"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 formgroup1">
<div class="row">
<div class="col-md-5">
<label class="pull-right">Current Address*</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevAddress">
</div>
</div>
<div class="row">
<div class="col-md-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevCont">
</div>
</div>
<div class="row">
<div class="col-md-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevCity">
</div>
</div>
<div class="row">
<div class="col-md-5">
<label class="pull-right">State</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevState">
</div>
</div>
<div class="row">
<div class="col-md-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevCode">
</div>
</div>
<div class="row">
<div class="col-md-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="First name" formControlName="prevRent">
</div>
</div>
</div>
<div class="col-md-4 formgroup2">
<div class="row">
<div class="col-md-6">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevLandlordName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevLandlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevAmount">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevRent">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevMoveIn">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" formControlName="prevMoveOut">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
</form>
<!-- <form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> -->
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>