cssangularbootstrap-4ngx-international-phone-number

ngx-international-phone-number to cant added style

Im used my angular project for this ngx-international-phone-number, I tried to add style, but its not worked for me, anyone know how to add correctly css on this input

Look my image, button and input filed is not aligned

enter image description here

StackBlitz here

<international-phone-number class="mystyle form-control form-control-sm"  placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'us'"  name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>

css

.mystyle .dropbtn {
  background: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}



 .mystyle .form-control {
   display: block;
   width: 100%;
   padding: 0.4375rem 0;
   font-size: 1rem;
   line-height: 1.5;    margin: 0px 5px;
   color: #495057;
   background-color: rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border: none;
   border-radius: 0;
   box-shadow: none;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
Solution

  • You need add :host ::ng-deep { *your css* } before your style. And change app.component.css > app.component.scss https://stackblitz.com/edit/angular-add-style Hope it helps you.