choose your country
Written by 21 August 2012
A drop-down list is used to fill out various forms on the websites. In the following code, a dropdown list is provided for selecting a country. This country list is filtrable, which means you can search in it, and also uses beautiful colors.
Code Snippet:
<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
align-items: center;
justify-content: flex-start;
font-family: "Ek Mukta";
text-transform: uppercase;
font-weight: 600;
letter-spacing: 4px;
background: #1D1F20;
}
h1 {
margin-top: 10vh;
font-size: 14px;
max-width: 500px;
letter-spacing: 3px;
text-align: center;
line-height: 1.5;
font-family: "Open Sans";
text-transform: capitalize;
font-weight: 800;
color: white;
}
h1 span {
color: #FF908B;
}
form {
position: relative;
width: 18rem;
margin-top: 8vh;
}
.chosen-value,
.value-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.chosen-value {
font-family: "Ek Mukta";
text-transform: uppercase;
font-weight: 600;
letter-spacing: 4px;
height: 4rem;
font-size: 1.1rem;
padding: 1rem;
background-color: #FAFCFD;
border: 3px solid transparent;
transition: 0.3s ease-in-out;
}
.chosen-value::-webkit-input-placeholder {
color: #333;
}
.chosen-value:hover {
background-color: #FF908B;
cursor: pointer;
}
.chosen-value:hover::-webkit-input-placeholder {
color: #333;
}
.chosen-value:focus, .chosen-value.open {
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
outline: 0;
background-color: #FF908B;
color: #000;
}
.chosen-value:focus::-webkit-input-placeholder, .chosen-value.open::-webkit-input-placeholder {
color: #000;
}
.value-list {
list-style: none;
margin-top: 4rem;
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
max-height: 0;
transition: 0.3s ease-in-out;
}
.value-list.open {
max-height: 320px;
overflow: auto;
}
.value-list li {
position: relative;
height: 4rem;
background-color: #FAFCFD;
padding: 1rem;
font-size: 1.1rem;
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
opacity: 1;
}
.value-list li:hover {
background-color: #FF908B;
}
.value-list li.closed {
max-height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600|Open+Sans:400,800" rel="stylesheet">
<h1><span>Styled</span> and <span>filterable</span> select dropdown</h1>
<form>
<input class="chosen-value" type="text" value="" placeholder="Type to filter">
<ul class="value-list">
<li value="Afganistan">Afghanistan</li>
<li value="Albania">Albania</li>
<li value="Algeria">Algeria</li>
<li value="American Samoa">American Samoa</li>
<li value="Andorra">Andorra</li>
<li value="Angola">Angola</li>
<li value="Anguilla">Anguilla</li>
<li value="Antigua & Barbuda">Antigua & Barbuda</li>
<li value="Argentina">Argentina</li>
<li value="Armenia">Armenia</li>
<li value="Aruba">Aruba</li>
<li value="Australia">Australia</li>
<li value="Austria">Austria</li>
<li value="Azerbaijan">Azerbaijan</li>
<li value="Bahamas">Bahamas</li>
<li value="Bahrain">Bahrain</li>
<li value="Bangladesh">Bangladesh</li>
<li value="Barbados">Barbados</li>
<li value="Belarus">Belarus</li>
<li value="Belgium">Belgium</li>
<li value="Belize">Belize</li>
<li value="Benin">Benin</li>
<li value="Bermuda">Bermuda</li>
<li value="Bhutan">Bhutan</li>
<li value="Bolivia">Bolivia</li>
<li value="Bonaire">Bonaire</li>
<li value="Bosnia & Herzegovina">Bosnia & Herzegovina</li>
<li value="Botswana">Botswana</li>
<li value="Brazil">Brazil</li>
<li value="British Indian Ocean Ter">British Indian Ocean Ter</li>
<li value="Brunei">Brunei</li>
<li value="Bulgaria">Bulgaria</li>
<li value="Burkina Faso">Burkina Faso</li>
<li value="Burundi">Burundi</li>
<li value="Cambodia">Cambodia</li>
<li value="Cameroon">Cameroon</li>
<li value="Canada">Canada</li>
<li value="Canary Islands">Canary Islands</li>
<li value="Cape Verde">Cape Verde</li>
<li value="Cayman Islands">Cayman Islands</li>
<li value="Central African Republic">Central African Republic</li>
<li value="Chad">Chad</li>
<li value="Channel Islands">Channel Islands</li>
<li value="Chile">Chile</li>
<li value="China">China</li>
<li value="Christmas Island">Christmas Island</li>
<li value="Cocos Island">Cocos Island</li>
<li value="Colombia">Colombia</li>
<li value="Comoros">Comoros</li>
<li value="Congo">Congo</li>
<li value="Cook Islands">Cook Islands</li>
<li value="Costa Rica">Costa Rica</li>
<li value="Cote DIvoire">Cote DIvoire</li>
<li value="Croatia">Croatia</li>
<li value="Cuba">Cuba</li>
<li value="Curaco">Curacao</li>
<li value="Cyprus">Cyprus</li>
<li value="Czech Republic">Czech Republic</li>
<li value="Denmark">Denmark</li>
<li value="Djibouti">Djibouti</li>
<li value="Dominica">Dominica</li>
<li value="Dominican Republic">Dominican Republic</li>
<li value="East Timor">East Timor</li>
<li value="Ecuador">Ecuador</li>
<li value="Egypt">Egypt</li>
<li value="El Salvador">El Salvador</li>
<li value="Equatorial Guinea">Equatorial Guinea</li>
<li value="Eritrea">Eritrea</li>
<li value="Estonia">Estonia</li>
<li value="Ethiopia">Ethiopia</li>
<li value="Falkland Islands">Falkland Islands</li>
<li value="Faroe Islands">Faroe Islands</li>
<li value="Fiji">Fiji</li>
<li value="Finland">Finland</li>
<li value="France">France</li>
<li value="French Guiana">French Guiana</li>
<li value="French Polynesia">French Polynesia</li>
<li value="French Southern Ter">French Southern Ter</li>
<li value="Gabon">Gabon</li>
<li value="Gambia">Gambia</li>
<li value="Georgia">Georgia</li>
<li value="Germany">Germany</li>
<li value="Ghana">Ghana</li>
<li value="Gibraltar">Gibraltar</li>
<li value="Great Britain">Great Britain</li>
<li value="Greece">Greece</li>
<li value="Greenland">Greenland</li>
<li value="Grenada">Grenada</li>
<li value="Guadeloupe">Guadeloupe</li>
<li value="Guam">Guam</li>
<li value="Guatemala">Guatemala</li>
<li value="Guinea">Guinea</li>
<li value="Guyana">Guyana</li>
<li value="Haiti">Haiti</li>
<li value="Hawaii">Hawaii</li>
<li value="Honduras">Honduras</li>
<li value="Hong Kong">Hong Kong</li>
<li value="Hungary">Hungary</li>
<li value="Iceland">Iceland</li>
<li value="Indonesia">Indonesia</li>
<li value="India">India</li>
<li value="Iran">Iran</li>
<li value="Iraq">Iraq</li>
<li value="Ireland">Ireland</li>
<li value="Isle of Man">Isle of Man</li>
<li value="Israel">Israel</li>
<li value="Italy">Italy</li>
<li value="Jamaica">Jamaica</li>
<li value="Japan">Japan</li>
<li value="Jordan">Jordan</li>
<li value="Kazakhstan">Kazakhstan</li>
<li value="Kenya">Kenya</li>
<li value="Kiribati">Kiribati</li>
<li value="Korea North">Korea North</li>
<li value="Korea Sout">Korea South</li>
<li value="Kuwait">Kuwait</li>
<li value="Kyrgyzstan">Kyrgyzstan</li>
<li value="Laos">Laos</li>
<li value="Latvia">Latvia</li>
<li value="Lebanon">Lebanon</li>
<li value="Lesotho">Lesotho</li>
<li value="Liberia">Liberia</li>
<li value="Libya">Libya</li>
<li value="Liechtenstein">Liechtenstein</li>
<li value="Lithuania">Lithuania</li>
<li value="Luxembourg">Luxembourg</li>
<li value="Macau">Macau</li>
<li value="Macedonia">Macedonia</li>
<li value="Madagascar">Madagascar</li>
<li value="Malaysia">Malaysia</li>
<li value="Malawi">Malawi</li>
<li value="Maldives">Maldives</li>
<li value="Mali">Mali</li>
<li value="Malta">Malta</li>
<li value="Marshall Islands">Marshall Islands</li>
<li value="Martinique">Martinique</li>
<li value="Mauritania">Mauritania</li>
<li value="Mauritius">Mauritius</li>
<li value="Mayotte">Mayotte</li>
<li value="Mexico">Mexico</li>
<li value="Midway Islands">Midway Islands</li>
<li value="Moldova">Moldova</li>
<li value="Monaco">Monaco</li>
<li value="Mongolia">Mongolia</li>
<li value="Montserrat">Montserrat</li>
<li value="Morocco">Morocco</li>
<li value="Mozambique">Mozambique</li>
<li value="Myanmar">Myanmar</li>
<li value="Nambia">Nambia</li>
<li value="Nauru">Nauru</li>
<li value="Nepal">Nepal</li>
<li value="Netherland Antilles">Netherland Antilles</li>
<li value="Netherlands">Netherlands (Holland, Europe)</li>
<li value="Nevis">Nevis</li>
<li value="New Caledonia">New Caledonia</li>
<li value="New Zealand">New Zealand</li>
<li value="Nicaragua">Nicaragua</li>
<li value="Niger">Niger</li>
<li value="Nigeria">Nigeria</li>
<li value="Niue">Niue</li>
<li value="Norfolk Island">Norfolk Island</li>
<li value="Norway">Norway</li>
<li value="Oman">Oman</li>
<li value="Pakistan">Pakistan</li>
<li value="Palau Island">Palau Island</li>
<li value="Palestine">Palestine</li>
<li value="Panama">Panama</li>
<li value="Papua New Guinea">Papua New Guinea</li>
<li value="Paraguay">Paraguay</li>
<li value="Peru">Peru</li>
<li value="Phillipines">Philippines</li>
<li value="Pitcairn Island">Pitcairn Island</li>
<li value="Poland">Poland</li>
<li value="Portugal">Portugal</li>
<li value="Puerto Rico">Puerto Rico</li>
<li value="Qatar">Qatar</li>
<li value="Republic of Montenegro">Republic of Montenegro</li>
<li value="Republic of Serbia">Republic of Serbia</li>
<li value="Reunion">Reunion</li>
<li value="Romania">Romania</li>
<li value="Russia">Russia</li>
<li value="Rwanda">Rwanda</li>
<li value="St Barthelemy">St Barthelemy</li>
<li value="St Eustatius">St Eustatius</li>
<li value="St Helena">St Helena</li>
<li value="St Kitts-Nevis">St Kitts-Nevis</li>
<li value="St Lucia">St Lucia</li>
<li value="St Maarten">St Maarten</li>
<li value="St Pierre & Miquelon">St Pierre & Miquelon</li>
<li value="St Vincent & Grenadines">St Vincent & Grenadines</li>
<li value="Saipan">Saipan</li>
<li value="Samoa">Samoa</li>
<li value="Samoa American">Samoa American</li>
<li value="San Marino">San Marino</li>
<li value="Sao Tome & Principe">Sao Tome & Principe</li>
<li value="Saudi Arabia">Saudi Arabia</li>
<li value="Senegal">Senegal</li>
<li value="Seychelles">Seychelles</li>
<li value="Sierra Leone">Sierra Leone</li>
<li value="Singapore">Singapore</li>
<li value="Slovakia">Slovakia</li>
<li value="Slovenia">Slovenia</li>
<li value="Solomon Islands">Solomon Islands</li>
<li value="Somalia">Somalia</li>
<li value="South Africa">South Africa</li>
<li value="Spain">Spain</li>
<li value="Sri Lanka">Sri Lanka</li>
<li value="Sudan">Sudan</li>
<li value="Suriname">Suriname</li>
<li value="Swaziland">Swaziland</li>
<li value="Sweden">Sweden</li>
<li value="Switzerland">Switzerland</li>
<li value="Syria">Syria</li>
<li value="Tahiti">Tahiti</li>
<li value="Taiwan">Taiwan</li>
<li value="Tajikistan">Tajikistan</li>
<li value="Tanzania">Tanzania</li>
<li value="Thailand">Thailand</li>
<li value="Togo">Togo</li>
<li value="Tokelau">Tokelau</li>
<li value="Tonga">Tonga</li>
<li value="Trinidad & Tobago">Trinidad & Tobago</li>
<li value="Tunisia">Tunisia</li>
<li value="Turkey">Turkey</li>
<li value="Turkmenistan">Turkmenistan</li>
<li value="Turks & Caicos Is">Turks & Caicos Is</li>
<li value="Tuvalu">Tuvalu</li>
<li value="Uganda">Uganda</li>
<li value="United Kingdom">United Kingdom</li>
<li value="Ukraine">Ukraine</li>
<li value="United Arab Erimates">United Arab Emirates</li>
<li value="United States of America">United States of America</li>
<li value="Uraguay">Uruguay</li>
<li value="Uzbekistan">Uzbekistan</li>
<li value="Vanuatu">Vanuatu</li>
<li value="Vatican City State">Vatican City State</li>
<li value="Venezuela">Venezuela</li>
<li value="Vietnam">Vietnam</li>
<li value="Virgin Islands (Brit)">Virgin Islands (Brit)</li>
<li value="Virgin Islands (USA)">Virgin Islands (USA)</li>
<li value="Wake Island">Wake Island</li>
<li value="Wallis & Futana Is">Wallis & Futana Is</li>
<li value="Yemen">Yemen</li>
<li value="Zaire">Zaire</li>
<li value="Zambia">Zambia</li>
<li value="Zimbabwe">Zimbabwe</li>
</ul>
</form>
<script>
const inputField = document.querySelector('.chosen-value');
const dropdown = document.querySelector('.value-list');
const dropdownArray = [...document.querySelectorAll('li')];
console.log(typeof dropdownArray);
dropdown.classList.add('open');
inputField.focus(); // Demo purposes only
let valueArray = [];
dropdownArray.forEach(item => {
valueArray.push(item.textContent);
});
const closeDropdown = () => {
dropdown.classList.remove('open');
};
inputField.addEventListener('input', () => {
dropdown.classList.add('open');
let inputValue = inputField.value.toLowerCase();
let valueSubstring;
if (inputValue.length > 0) {
for (let j = 0; j < valueArray.length; j++) {
if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
dropdownArray[j].classList.add('closed');
} else {
dropdownArray[j].classList.remove('closed');
}
}
} else {
for (let i = 0; i < dropdownArray.length; i++) {
dropdownArray[i].classList.remove('closed');
}
}
});
dropdownArray.forEach(item => {
item.addEventListener('click', evt => {
inputField.value = item.textContent;
dropdownArray.forEach(dropdown => {
dropdown.classList.add('closed');
});
});
});
inputField.addEventListener('focus', () => {
inputField.placeholder = 'Type to filter';
dropdown.classList.add('open');
dropdownArray.forEach(dropdown => {
dropdown.classList.remove('closed');
});
});
inputField.addEventListener('blur', () => {
inputField.placeholder = 'Select state';
dropdown.classList.remove('open');
});
document.addEventListener('click', evt => {
const isDropdown = dropdown.contains(evt.target);
const isInput = inputField.contains(evt.target);
if (!isDropdown && !isInput) {
dropdown.classList.remove('open');
}
});
</script><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!