CODEWITHSUNDEEP
htmlcssbootstrap-4
Harsh Nagalla
Harsh Nagalla

Reputation: 1245

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

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

Mobile

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.

Upvotes: 1

Views: 16781

Answers (2)

mpalencia
mpalencia

Reputation: 6007

Use bootstrap:

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

Upvotes: 3

d3vma
d3vma

Reputation: 171

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

Upvotes: 5

Related Questions