intl-tel-input输入框布局异常：国旗下拉框覆盖输入区域

我在使用intl-tel-input组件时遇到布局异常：国旗下拉框直接覆盖在输入框上方，导致输入区域显示错乱。尝试通过自定义CSS将输入框向右偏移，但无论是否加!important，样式都不生效。只有通过浏览器审查元素手动添加样式时，才能正常调整位置。

组件代码与样式 #

组件HTML代码 #

<intl-tel-input
  [name]="'phoneInput'"
  [required]="true"
  [options]="{
    preferredCountries: ['GB'],
    onlyCountries: ['GB', 'US', 'IE']
  }"
  [onlyLocalized]="true"
  [(E164PhoneNumber)]="E164PhoneNumber">
</intl-tel-input>

已生效的基础CSS #

:host ::ng-deep .iti {
  display: block;
  width: 100%;
}

未生效的自定义样式 #

.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 10% !important;
}

组件渲染后的HTML结构 #

<intl-tel-input _ngcontent-xka-c95="" _nghost-xka-c93="" ng-reflect-name="phoneInput" ng-reflect-required="true" ng-reflect-options="[object Object]" ng-reflect-only-localized="true" ng-reflect--e164-phone-number="">
   <!--bindings={}-->
   <div class="iti iti--allow-dropdown">
      <div class="iti__flag-container">
         <div class="iti__selected-flag" role="combobox" aria-controls="iti-0__country-listbox" aria-owns="iti-0__country-listbox" aria-expanded="false" tabindex="0" title="United Kingdom: +44" aria-activedescendant="iti-0__item-gb-preferred">
            <div class="iti__flag iti__gb"></div>
            <div class="iti__arrow"></div>
         </div>
         <ul class="iti__country-list iti__hide" id="iti-0__country-listbox" role="listbox" aria-label="List of countries">
            <li class="iti__country iti__preferred iti__active" tabindex="-1" id="iti-0__item-gb-preferred" role="option" data-dial-code="44" data-country-code="gb" aria-selected="true">
               <div class="iti__flag-box">
                  <div class="iti__flag iti__gb"></div>
               </div>
               <span class="iti__country-name">United Kingdom</span><span class="iti__dial-code">+44</span>
            </li>
            <li class="iti__divider" role="separator" aria-disabled="true"></li>
            <li class="iti__country iti__standard" tabindex="-1" id="iti-0__item-ie" role="option" data-dial-code="353" data-country-code="ie" aria-selected="false">
               <div class="iti__flag-box">
                  <div class="iti__flag iti__ie"></div>
               </div>
               <span class="iti__country-name">Ireland</span><span class="iti__dial-code">+353</span>
            </li>
            <li class="iti__country iti__standard" tabindex="-1" id="iti-0__item-gb" role="option" data-dial-code="44" data-country-code="gb" aria-selected="false">
               <div class="iti__flag-box">
                  <div class="iti__flag iti__gb"></div>
               </div>
               <span class="iti__country-name">United Kingdom</span><span class="iti__dial-code">+44</span>
            </li>
            <li class="iti__country iti__standard" tabindex="-1" id="iti-0__item-us" role="option" data-dial-code="1" data-country-code="us" aria-selected="false">
               <div class="iti__flag-box">
                  <div class="iti__flag iti__us"></div>
               </div>
               <span class="iti__country-name">United States</span><span class="iti__dial-code">+1</span>
            </li>
         </ul>
      </div>
      <input _ngcontent-xka-c93="" type="text" ng-reflect-name="phoneInput" ng-reflect-required="true" id="phoneInput" name="phoneInput" aria-required="true" class="ng-pristine ng-invalid ng-touched" required="" autocomplete="off" placeholder="07400 123456" data-intl-tel-input-id="0">
   </div>
</intl-tel-input>

解决方法 #

问题根源是Angular的样式隔离机制：组件内部的样式默认无法穿透到第三方组件的DOM结构中。你需要把自定义样式也包裹在:host ::ng-deep中，确保样式能作用到intl-tel-input的内部元素：

修改后的有效CSS #

:host ::ng-deep .iti--allow-dropdown input, 
:host ::ng-deep .iti--allow-dropdown input[type=text], 
:host ::ng-deep .iti--allow-dropdown input[type=tel], 
:host ::ng-deep .iti--separate-dial-code input, 
:host ::ng-deep .iti--separate-dial-code input[type=text], 
:host ::ng-deep .iti--separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 10%;
}

更简洁的写法 #

可以利用嵌套选择器减少代码重复：

:host ::ng-deep .iti--allow-dropdown, 
:host ::ng-deep .iti--separate-dial-code {
  input, input[type=text], input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 10%;
  }
}

如果你的样式是写在全局CSS文件（比如styles.css）中，不需要::ng-deep，但要确保选择器优先级足够（比如添加父容器的类名来提升优先级）。

内容的提问来源于stack exchange，提问作者WhatsThePoint