如何创建带有国家/地区代码的自定义手机号码输入框 - HTML

Answer 1

这是为您提供的 5 分钟快速解决方案，请随意增强；）

.form-group {
  border: 1px solid #ced4da;
  padding: 5px;
  border-radius: 6px;
  width: auto;
}
.form-group:focus {
  color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.form-group input {
  display: inline-block;
  width: auto;
  border: none;
}
.form-group input:focus {
  box-shadow: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
  <div class="col-md-6">
    <p>Mobile</p>
    <div class="form-group mt-2 d-inline-block">
        <span class="border-end country-code px-2">+60</span>
        <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp" placeholder="91257888" />
    </div>
</div>
</div>

Answer 2

使用引导程序：

   <div class="input-group">
     <span class="input-group-text">+65</span>
     <input type="text" aria-label="phone" class="form-control">
    </div>