choose your country

Written by @kerixa 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:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!
Comments

Here you can leave us commments. Let us know what you think about this code tutorial!
0 / 300