How to create a custom mobile number input box with country code - HTML

Question

I am trying to create a custom mobile input box with mobile number and country code separated by a divider but unable to do it.

Design

Current Implementation

          
<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>
                        

Would be great if someone can help with this.

Answer 1

Here is a 5 mins quick solution for you, feel free to enhance;)

 .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>