Как выбрать код страны для телефонного номера?

Для реализации поля выбора кода страны для ввода номера телефона с добавлением списка стран сверху можно использовать HTML, CSS и JavaScript. Вот пример, как это можно сделать:

HTML:
```html
<div class="phone-input">
  <div class="selected-country">
    <input type="text" id="country-code" readonly>
    <img src="country-flag.png" alt="Selected Country" id="selected-country-flag">
    <span class="arrow"></span>
  </div>
  <ul class="country-list">
    <li data-country="US">
      <img src="us-flag.png" alt="United States">
      <span class="country-name">United States</span>
      <span class="country-code">+1</span>
    </li>
    <li data-country="GB">
      <img src="gb-flag.png" alt="United Kingdom">
      <span class="country-name">United Kingdom</span>
      <span class="country-code">+44</span>
    </li>
    <li data-country="RU">
      <img src="ru-flag.png" alt="Russia">
      <span class="country-name">Russia</span>
      <span class="country-code">+7</span>
    </li>
    <!-- добавьте другие страны по аналогии -->
  </ul>
  <input type="tel" id="phone-number">
</div>
```

CSS:
```css
.phone-input {
  position: relative;
}

.selected-country {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

#country-code {
  border: none;
  outline: none;
  font-size: 16px;
  margin-right: 5px;
}

#selected-country-flag {
  width: 20px;
  height: 20px;
}

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
}

.country-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1;
}

.country-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.country-list li:hover {
  background-color: #f5f5f5;
}

.country-list li img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.country-name {
  margin-right: 5px;
}

.country-code {
  color: #777;
}
```

JavaScript:
```javascript
const countryCodeInput = document.getElementById('country-code');
const selectedCountryFlag = document.getElementById('selected-country-flag');
const countryList = document.querySelector('.country-list');
const countryListItems = countryList.getElementsByTagName('li');
const phoneNumberInput = document.getElementById('phone-number');

// Отображение списка стран и выбор кода страны
const showCountryList = () => {
  countryList.style.display = 'block';
}

const hideCountryList = () => {
  countryList.style.display = 'none';
}

const selectCountry = (code, flag) => {
  countryCodeInput.value = code;
  selectedCountryFlag.src = flag;
  hideCountryList();
  phoneNumberInput.focus();
}

for (let i = 0; i < countryListItems.length; i++) {
  const listItem = countryListItems[i];
  listItem.addEventListener('click', () => {
    const countryCode = listItem.querySelector('.country-code').textContent;
    const countryFlag = listItem.querySelector('img').src;
    selectCountry(countryCode, countryFlag);
  });
}

selectedCountryFlag.addEventListener('click', showCountryList);
document.addEventListener('click', (event) => {
  const targetElement = event.target;
  if (!targetElement.closest('.phone-input')) {
    hideCountryList();
  }
});
```

Вы можете заменить "country-flag.png" на путь к изображ

Совсем не то? 
 
 https://codepen.io/maksam07/pen/ExMrwrY

Изучите документацию к плагину https://github.com/jackocnr/intl-tel-input 
 
 Вам нужны