想要为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>