ngx-international-phone-number to cant added style

Question

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

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

Answer 1

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.

Answer 2

You can use ng-phone-number instead of ngx-international-phone-number, its basically an extension of ngx-international-phone-number but its updated and well maintained with language support and issues fixed quickly upon feedback. Flag issues is also fixed here. Here is the link of library https://www.npmjs.com/package/ng-phone-number