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>