css - Intl-tel-input：使 Country 列表下拉宽度与输入字段宽度匹配

Question

谁能帮助我如何使国家列表下拉列表始终与输入字段宽度匹配？

将国家/地区列表下拉菜单设置为 100% 不起作用。它应该具有其祖父母的 100% 宽度。但是，不知道如何实现这一目标。

它可以通过 javascScript 来实现，但我只需要使用 CSS 来实现。当输入字段宽度发生变化时，下拉菜单和输入字段的宽度应该相同。

这是在线 jsfiddle 演示网址：http: //jsfiddle.net/5num12gh/

HTML：

<input type="tel" id="phone">

jQuery：

$("#phone").intlTelInput();

谢谢，

Answer 1

您可以将 flagContainer 的位置更改为绝对/相对以外的位置，因此下拉菜单不会相对于它定位，而是相对于.intl-tel-input具有输入宽度的类的 div（其中唯一的非绝对元素）

然后使用一些 CSS 定位下拉菜单和相应的标志。

也许还有其他解决方案，例如更改文档中所述的元素dropdownContainer，但不确定。

检查下面的代码片段或jsfiddle

$("#phone").intlTelInput();

.iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png");
}

body .intl-tel-input .flag-container {
  position: static;

}

body .intl-tel-input .selected-flag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
}

body .intl-tel-input .country-list {
  width: 100%;
  top: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/utils.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/css/intlTelInput.css" rel="stylesheet"/>

<input type="tel" id="phone">

Answer 2

1. 首先将顺序iti__flag-container改为：

2. 将top: 17pxcss属性添加到iti__selected-flag类

3. 删除white-spaceCSS 属性iti__country-list

宾果游戏您的下拉菜单将与父级的宽度相同