Flag and input field issue for intl-tel-input CSS

Question

I am trying to integrate a intl-tel-input fied in a form, using a specific template. I cannot solve the issue of having the flag overlapping the input field. I also would like to set the dropdown list to an inversed color(black background and white letters) to match the visual of the page.

 <div class="  input-group">
  <input  class="form-control" type="text" type="tel" id="mobile_code"  name="name">
</div>

i have attached my code in this codepen

Answer 1

Add this to css. Css from library sets wrong values.

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
  right:0;
  left:auto;
}

Answer 2

just add the following

.iti--allow-dropdown input{
    padding-left: 52px;}

css