Skip to content

Instantly share code, notes, and snippets.

@Alloco225

Alloco225/select drapeaux pays.html

Last active June 21, 2020 21:42
Show Gist options
  • Save Alloco225/f9de34d75589f441773bff35558057c9 to your computer and use it in GitHub Desktop.
Save Alloco225/f9de34d75589f441773bff35558057c9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
select drapeaux pays.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Montserrat Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<!-- Mobile Css -->
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/adjemin.css">
<link rel="stylesheet" href="css/forms.css">
<title>AdjeminPay - Register</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.cool-input-half{
width: 100%;
}
.cool-input {
display: flex;
align-items: center;
border-radius: var(--border-radius);
border: none;
/* width: 30%; */
background-color: var(--primary-pale);
}
.input, .select{
background-color: transparent !important;
height: 30px;
padding: 0;
border: none;
border-radius: var(--border-radius);
}
.cool-input .prepend{
margin: 5px 10px;
/* margin-left: 10px; */
/* display: flex; */
}
.cool-input .prepend.prepend-select{
/* margin: 0 10px 0 10px;
height: 30px; */
}
.cool-input input{
border: none;
border-radius: 5px;
width: 100%;
margin: 5px 0;
font-size: small;
}
.input:focus{
border: none !important;
outline: none !important;
}
.input {
outline-offset: 0;
outline-color: 0;
outline-width: 0;
}
#flags-container{
z-index: 100;
position: absolute;
border: 1px solid grey;
background-color: white;
width: 100%;
top: 0;
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.flag-item{
display: flex;
justify-content: space-between;
align-items: center;
/* padding-right: 50px; */
padding-top: 5px;
padding-bottom: 5px;
}
.flag-item .name-flag{
display: flex;
align-items: center;
}
.flag-item .code-value{
margin-right: 5px;
}
.flag-item:hover{
background-color: var(--bg);
}
.flag-img{
width: 30px;
padding: 0 5px;
margin-left: 5px;
}
</style>
</head>
<body class="">
<div class="cool-input">
<!-- <span class="prepend">
<i class="fa fa-user" aria-hidden="true"></i>
</span> -->
<!-- <div> -->
<div name="" id="" class="prepend prepend-select">
<a href="#"
onclick="event.preventDefault();displayFlagsCountainer();" class="selected-flag flag-select">
<span id="selected-flag" class="country-flag">
<img src="img/flags/ci.png" alt="" width="20px">
</span>
<span id="selected-code" class="country-code ml-1">+225</span>
<!-- Selector -->
<i class="fa fa-caret-down ml-2" aria-hidden="true"></i>
</div>
</a>
<!-- </div> -->
<input type="text" class="input pr-2" placeholder="Numéro de téléphone">
</div>
<script>
// displayAn
//alert("l");
function displayFlagsCountainer() {
var f = document.getElementById("flags-container");
f.style.display = "block";
}
//
function selectCountry() {
var f = document.getElementById("flags-container");
f.style.display = "none";
document.getElementById("selected-flag").attributes("src") = "img/flags/jp.png";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment