CODEWITHSUNDEEP
angularbootstrap-4
Baruch Mashasha
Baruch Mashasha

Reputation: 979

How to disable border-radius of bootstrap inputs in Angular

I am using bootstrap input controls and trying to disable the border by setting it to 0px, but its not working.

I have seen a lot of posts here but none of them worked for me. I tried to use !important and moved the css classes to the main style.css file and again its not working.

<div class="form-group">
   <select class="form-control" formControlName="manager" required #manager #manager (change)="selectedValueManager(manager.value)">
      <option value="">choose manager</option>
      <option *ngFor="let manager of this.flowManagers" value={{manager.id}}> {{manager.name}}</option>
   </select>
   <div class="invalid-feedback"></div>
</div>

css:

.form-group {
   border-radius: 0px;
}

Upvotes: 0

Views: 1983

Answers (5)

Murugan Vellaisamy
Murugan Vellaisamy

Reputation: 344

Please add this properties to remove border border-color: transparent;

Upvotes: 0

FedG
FedG

Reputation: 1301

Make it more specific than bootstrap:

    select.from-control {
          border-radius:0;
    }

Upvotes: 0

Binara Thambugala
Binara Thambugala

Reputation: 776

Do like below. Apply style to .form-control class

.form-control {
    border-radius: 0 !important;
}

Upvotes: 0

Roman Šim&#237;k
Roman Šim&#237;k

Reputation: 900

You should apply that rule on the .form-control css class, and also make sure you load first the boostrap.css and after that your styles.css

.form-control {
    border-radius: 0;
}

Upvotes: 1

AWS PS
AWS PS

Reputation: 4710

You can add the class rounded-0 to the input

Upvotes: 4

Related Questions