cleave.js phone select demo
cleave.js phone select demo
HTML
<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<div class="container">
<select class="select-country"></select>
<input class="input-phone" placeholder="Enter phone number" />
<p>
</p>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
width: 400px;
}
.container:after {
content: "";
display: table;
clear: both;
}
select {
height: 33px;
float: left;
}
input {
width: 200px;
float: left;
display: block;
outline: none;
-webkit-appearance: none;
border: 1px solid #999;
border-radius: 5px;
background-color: #fff;
line-height: 30px;
vertical-align: middle;
height: 33px;
font-size: 14px;
padding: 0 8px;
margin-left: 5px;
}
body {
font-family: sans-serif;
}