<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Dropdown Nationality</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background:#f5f6fa;
padding:40px;
}
/* Wrapper */
.dropdown{
width:320px;
position:relative;
}
/* Input hiển thị */
.dropdown-selected{
width:100%;
height:44px;
border:1px solid #dcdcdc;
border-radius:8px;
padding:0 40px 0 12px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
}
.dropdown-selected.active{
border-color:#1677ff;
box-shadow:0 0 0 2px rgba(22,119,255,.15);
}
.dropdown-selected span{
color:#999;
}
/* Icon */
.dropdown-selected::after{
content:"▼";
font-size:12px;
color:#888;
}
/* Dropdown menu */
.dropdown-menu{
position:absolute;
top:50px;
left:0;
width:100%;
background:#fff;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,.15);
display:none;
z-index:1000;
}
/* Search box */
.dropdown-search{
padding:10px;
border-bottom:1px solid #eee;
}
.dropdown-search input{
width:100%;
height:36px;
border:1px solid #ddd;
border-radius:6px;
padding:0 10px;
}
/* List */
.dropdown-list{
max-height:220px;
overflow-y:auto;
}
.dropdown-item{
padding:10px 14px;
cursor:pointer;
}
.dropdown-item:hover{
background:#f2f6ff;
}
</style>
</head>
<body>
<label><b>Nationality *</b></label>
<div class="dropdown" id="dropdown">
<div class="dropdown-selected" id="selected">
<span>Choose nationality</span>
</div>
<div class="dropdown-menu" id="menu">
<div class="dropdown-search">
<input type="text" id="search" placeholder="Search nationality">
</div>
<div class="dropdown-list" id="list">
<div class="dropdown-item">Afghanistan</div>
<div class="dropdown-item">Albania</div>
<div class="dropdown-item">Algeria</div>
<div class="dropdown-item">American Samoa</div>
<div class="dropdown-item">American Virgin Islands</div>
<div class="dropdown-item">Andorra</div>
<div class="dropdown-item">Angola</div>
<div class="dropdown-item">Anguilla</div>
<div class="dropdown-item">Antarctica</div>
<div class="dropdown-item">Antigua and Barbuda</div>
<div class="dropdown-item">Argentina</div>
<div class="dropdown-item">Armenia</div>
<div class="dropdown-item">Aruba</div>
<div class="dropdown-item">Asean</div>
<div class="dropdown-item">Australia</div>
<div class="dropdown-item">Austria</div>
<div class="dropdown-item">Azerbaijan</div>
<div class="dropdown-item">Bahrain</div>
<div class="dropdown-item">Baker Island</div>
<div class="dropdown-item">Bangladesh</div>
<div class="dropdown-item">Barbados</div>
<div class="dropdown-item">Belarus</div>
<div class="dropdown-item">Belgium</div>
<div class="dropdown-item">Belize</div>
<div class="dropdown-item">Benin</div>
<div class="dropdown-item">Bermuda</div>
<div class="dropdown-item">Bhutan</div>
<div class="dropdown-item">Bolivia</div>
<div class="dropdown-item">Bosnia and Herzegovina</div>
<div class="dropdown-item">Botswana</div>
<div class="dropdown-item">Bouvet Island</div>
<div class="dropdown-item">Brazil</div>
<div class="dropdown-item">British Indian Ocean Territory</div>
<div class="dropdown-item">British Virgin Islands</div>
<div class="dropdown-item">Brunei Darussalam</div>
<div class="dropdown-item">Bulgaria</div>
<div class="dropdown-item">Burkina Faso</div>
<div class="dropdown-item">Burundi</div>
<div class="dropdown-item">Cambodia</div>
<div class="dropdown-item">Cameroon</div>
<div class="dropdown-item">Canada</div>
<div class="dropdown-item">Cape Verde</div>
<div class="dropdown-item">Cayman Islands</div>
<div class="dropdown-item">Central African Republic</div>
<div class="dropdown-item">Chad</div>
<div class="dropdown-item">Channel Islands</div>
<div class="dropdown-item">Chile</div>
<div class="dropdown-item">China</div>
<div class="dropdown-item">Christmas Island</div>
<div class="dropdown-item">Clipperton Island</div>
<div class="dropdown-item">Cocos (Keeling) Islands</div>
<div class="dropdown-item">Colombia</div>
<div class="dropdown-item">Comoros</div>
<div class="dropdown-item">Cook Islands</div>
<div class="dropdown-item">Corsica</div>
<div class="dropdown-item">Costa Rica</div>
<div class="dropdown-item">Cuba</div>
<div class="dropdown-item">Cyprus</div>
<div class="dropdown-item">Czechia</div>
<div class="dropdown-item">Democratic Republic of the Congo</div>
<div class="dropdown-item">Denmark</div>
<div class="dropdown-item">Djibouti</div>
<div class="dropdown-item">Dominica</div>
<div class="dropdown-item">Dominican Republic</div>
<div class="dropdown-item">Ecuador</div>
<div class="dropdown-item">Egypt</div>
<div class="dropdown-item">El Salvador</div>
<div class="dropdown-item">Equatorial Guinea</div>
<div class="dropdown-item">Eritrea</div>
<div class="dropdown-item">Estonia</div>
<div class="dropdown-item">Eswatini</div>
<div class="dropdown-item">Ethiopia</div>
<div class="dropdown-item">European Union</div>
<div class="dropdown-item">Falkland Islands (Malvinas)</div>
<div class="dropdown-item">Faroe Islands</div>
<div class="dropdown-item">Fiji</div>
<div class="dropdown-item">Finland</div>
<div class="dropdown-item">France</div>
<div class="dropdown-item">French Guiana</div>
<div class="dropdown-item">French Polynesia</div>
<div class="dropdown-item">French Southern Territories</div>
<div class="dropdown-item">Gabon</div>
<div class="dropdown-item">Gaza Strip</div>
<div class="dropdown-item">Georgia</div>
<div class="dropdown-item">Germany</div>
<div class="dropdown-item">Ghana</div>
<div class="dropdown-item">Gibraltar</div>
<div class="dropdown-item">Glorioso Island</div>
<div class="dropdown-item">Greece</div>
<div class="dropdown-item">Greenland</div>
<div class="dropdown-item">Grenada</div>
<div class="dropdown-item">Guadeloupe</div>
<div class="dropdown-item">Guam</div>
<div class="dropdown-item">Guatemala</div>
<div class="dropdown-item">Guernsey</div>
<div class="dropdown-item">Guinea</div>
<div class="dropdown-item">Guinea-Bissau</div>
<div class="dropdown-item">Guyana</div>
<div class="dropdown-item">Haiti</div>
<div class="dropdown-item">Heard Island and McDonald Islands</div>
<div class="dropdown-item">Honduras</div>
<div class="dropdown-item">Hong Kong</div>
<div class="dropdown-item">Howland Island</div>
<div class="dropdown-item">Hungary</div>
<div class="dropdown-item">Iceland</div>
<div class="dropdown-item">India</div>
<div class="dropdown-item">Indonesia</div>
<div class="dropdown-item">Iran</div>
<div class="dropdown-item">Iraq</div>
<div class="dropdown-item">Ireland</div>
<div class="dropdown-item">Isle of Man</div>
<div class="dropdown-item">Israel</div>
<div class="dropdown-item">Italy</div>
<div class="dropdown-item">Ivory Coast</div>
<div class="dropdown-item">Jamaica</div>
<div class="dropdown-item">Jan Mayen</div>
<div class="dropdown-item">Japan</div>
<div class="dropdown-item">Jarvis Island</div>
<div class="dropdown-item">Jersey</div>
<div class="dropdown-item">Johnston Atoll</div>
<div class="dropdown-item">Jordan</div>
<div class="dropdown-item">Juan de Nova Island</div>
<div class="dropdown-item">Kazakhstan</div>
<div class="dropdown-item">Kenya</div>
<div class="dropdown-item">Kingman Reef</div>
<div class="dropdown-item">Kiribati</div>
<div class="dropdown-item">Kuwait</div>
<div class="dropdown-item">Kyrgyzstan</div>
<div class="dropdown-item">Laos</div>
<div class="dropdown-item">Latvia</div>
<div class="dropdown-item">Lebanon</div>
<div class="dropdown-item">Lesotho</div>
<div class="dropdown-item">Liberia</div>
<div class="dropdown-item">Libya</div>
<div class="dropdown-item">Liechtenstein</div>
<div class="dropdown-item">Lithuania</div>
<div class="dropdown-item">Luxembourg</div>
<div class="dropdown-item">Macao</div>
<div class="dropdown-item">Madagascar</div>
<div class="dropdown-item">Malawi</div>
<div class="dropdown-item">Malaysia</div>
<div class="dropdown-item">Maldives</div>
<div class="dropdown-item">Mali</div>
<div class="dropdown-item">Malta</div>
<div class="dropdown-item">Marshall Islands</div>
<div class="dropdown-item">Martinique</div>
<div class="dropdown-item">Mauritania</div>
<div class="dropdown-item">Mauritius</div>
<div class="dropdown-item">Mayotte</div>
<div class="dropdown-item">Mexico</div>
<div class="dropdown-item">Micronesia</div>
<div class="dropdown-item">Minor Outlying Islands</div>
<div class="dropdown-item">Moldova</div>
<div class="dropdown-item">Monaco</div>
<div class="dropdown-item">Mongolia</div>
<div class="dropdown-item">Montenegro</div>
<div class="dropdown-item">Montserrat</div>
<div class="dropdown-item">Morocco</div>
<div class="dropdown-item">Mozambique</div>
<div class="dropdown-item">Myanmar</div>
<div class="dropdown-item">Namibia</div>
<div class="dropdown-item">NATO</div>
<div class="dropdown-item">Nauru</div>
<div class="dropdown-item">Navassa Island</div>
<div class="dropdown-item">Nepal</div>
<div class="dropdown-item">Netherlands</div>
<div class="dropdown-item">Netherlands Antilles</div>
<div class="dropdown-item">New Caledonia</div>
<div class="dropdown-item">New Zealand</div>
<div class="dropdown-item">Nicaragua</div>
<div class="dropdown-item">Niger</div>
<div class="dropdown-item">Nigeria</div>
<div class="dropdown-item">Niue</div>
<div class="dropdown-item">Norfolk Islands</div>
<div class="dropdown-item">North Korea</div>
<div class="dropdown-item">North Macedonia</div>
<div class="dropdown-item">Northern Mariana Islands</div>
<div class="dropdown-item">Norway</div>
<div class="dropdown-item">Oman</div>
<div class="dropdown-item">Other</div>
<div class="dropdown-item">Other Country</div>
<div class="dropdown-item">Pakistan</div>
<div class="dropdown-item">Palau</div>
<div class="dropdown-item">Palestine</div>
<div class="dropdown-item">Palmyra Atoll</div>
<div class="dropdown-item">Panama</div>
<div class="dropdown-item">Papua New Guinea</div>
<div class="dropdown-item">Paraguay</div>
<div class="dropdown-item">Peru</div>
<div class="dropdown-item">Philippines</div>
<div class="dropdown-item">Pitcairn Islands</div>
<div class="dropdown-item">Poland</div>
<div class="dropdown-item">Portugal</div>
<div class="dropdown-item">Puerto Rico</div>
<div class="dropdown-item">Qatar</div>
<div class="dropdown-item">Republic of the Congo</div>
<div class="dropdown-item">Reunion</div>
<div class="dropdown-item">Romania</div>
<div class="dropdown-item">Russia</div>
<div class="dropdown-item">Rwanda</div>
<div class="dropdown-item">Saint Helena</div>
<div class="dropdown-item">Saint Kitts and Nevis</div>
<div class="dropdown-item">Saint Lucia</div>
<div class="dropdown-item">Saint Pierre and Miquelon</div>
<div class="dropdown-item">Saint Vincent and the Grenadines</div>
<div class="dropdown-item">Samoa</div>
<div class="dropdown-item">San Marino</div>
<div class="dropdown-item">São Tomé and Príncipe</div>
<div class="dropdown-item">Saudi Arabia</div>
<div class="dropdown-item">Senegal</div>
<div class="dropdown-item">Serbia</div>
<div class="dropdown-item">Serbia and Montenegro</div>
<div class="dropdown-item">Seychelles</div>
<div class="dropdown-item">Sierra Leone</div>
<div class="dropdown-item">Singapore</div>
<div class="dropdown-item">Slovakia</div>
<div class="dropdown-item">Slovenia</div>
<div class="dropdown-item">Solomon Islands</div>
<div class="dropdown-item">Somalia</div>
<div class="dropdown-item">South Africa</div>
<div class="dropdown-item">South Korea</div>
<div class="dropdown-item">South Sandwich Islands</div>
<div class="dropdown-item">Spain</div>
<div class="dropdown-item">Sri Lanka</div>
<div class="dropdown-item">Sudan</div>
<div class="dropdown-item">Suriname</div>
<div class="dropdown-item">Svalbard</div>
<div class="dropdown-item">Sweden</div>
<div class="dropdown-item">Switzerland</div>
<div class="dropdown-item">Syria</div>
<div class="dropdown-item">Taiwan</div>
<div class="dropdown-item">Tajikistan</div>
<div class="dropdown-item">Tanzania</div>
<div class="dropdown-item">Thailand</div>
<div class="dropdown-item">The Bahamas</div>
<div class="dropdown-item">The Gambia</div>
<div class="dropdown-item">Timor-Leste</div>
<div class="dropdown-item">Togo</div>
<div class="dropdown-item">Tokelau</div>
<div class="dropdown-item">Tonga</div>
<div class="dropdown-item">Trinidad and Tobago</div>
<div class="dropdown-item">Tromelin Island</div>
<div class="dropdown-item">Tunisia</div>
<div class="dropdown-item">Turkey</div>
<div class="dropdown-item">Turkmenistan</div>
<div class="dropdown-item">Turks and Caicos Islands</div>
<div class="dropdown-item">Tuvalu</div>
<div class="dropdown-item">Uganda</div>
<div class="dropdown-item">Ukraine</div>
<div class="dropdown-item">United Arab Emirates</div>
<div class="dropdown-item">United Kingdom</div>
<div class="dropdown-item">United Nations</div>
<div class="dropdown-item">United States</div>
<div class="dropdown-item">Unknown Country</div>
<div class="dropdown-item">Uruguay</div>
<div class="dropdown-item">Uzbekistan</div>
<div class="dropdown-item">Vanuatu</div>
<div class="dropdown-item">Vatican City</div>
<div class="dropdown-item">Venezuela</div>
<div class="dropdown-item">Vietnam</div>
<div class="dropdown-item">Wallis and Futuna</div>
<div class="dropdown-item">West Sahara</div>
<div class="dropdown-item">Yemen</div>
<div class="dropdown-item">Yugoslavia</div>
<div class="dropdown-item">Zambia</div>
<div class="dropdown-item">Zimbabwe</div>
</div>
</div>
</div>
<script>
const selected = document.getElementById("selected");
const menu = document.getElementById("menu");
const search = document.getElementById("search");
const items = document.querySelectorAll(".dropdown-item");
// Toggle dropdown
selected.onclick = () => {
menu.style.display = menu.style.display === "block" ? "none" : "block";
selected.classList.toggle("active");
search.focus();
};
// Select item
items.forEach(item=>{
item.onclick = ()=>{
selected.innerHTML = item.innerText;
menu.style.display = "none";
selected.classList.remove("active");
};
});
// Search filter
search.addEventListener("keyup", ()=>{
const val = search.value.toLowerCase();
items.forEach(item=>{
item.style.display = item.innerText.toLowerCase().includes(val)
? "block"
: "none";
});
});
// Click outside close
document.addEventListener("click", e=>{
if(!document.getElementById("dropdown").contains(e.target)){
menu.style.display = "none";
selected.classList.remove("active");
}
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét