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

Question

我正在尝试创建一个自定义移动输入框，其中包含由分隔线分隔的手机号码和国家/地区代码，但无法做到。

设计

当前实施

          
<div class="col-md-6">
    <p>Mobile</p>
    <div class="form-group mt-2">
        <input type="text" class="form-control" id="ec-mobile-number" aria-describedby="emailHelp"
                              placeholder="91257888" />
    </div>
</div>
                        

如果有人可以提供帮助，那就太好了。

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/bootstrap@5.0.0-beta3/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>