如何創建帶有國家代碼的自定義手機號碼輸入框 - 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>