[英]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.我正在尝试创建一个自定义移动输入框,其中包含由分隔线分隔的手机号码和国家/地区代码,但无法做到。
<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.如果有人可以提供帮助,那就太好了。
Here is a 5 mins quick solution for you, feel free to enhance;)这是一个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.