A good first building block

Choose a country from a sample list

A native select with a placeholder and a clear selected-country result.

HTMLCSSJavaScriptNo dependencies

Live preview

Explore the result below

HTML

<main
  ><h1>Where should we begin?</h1><label for="country">Country</label
  ><select id="country" aria-describedby="country-note"
    ><option value="">Choose a country</option
    ><option value="CA">Canada</option
    ><option value="DE">Germany</option
    ><option value="IN">India</option
    ><option value="JP">Japan</option
    ><option value="NZ">New Zealand</option
    ><option value="GB">United Kingdom</option
    ><option value="US">United States</option></select
  ><p id="country-note">A small illustrative list, not a complete country directory.</p
  ><p id="country-result" role="status">No country selected.</p
  ><button id="reset-country">Reset selection</button></main
>

CSS

:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  width: min(100%, 480px);
  background: white;
  border-radius: 20px;
  padding: 24px;
}
h1 {
  font-size: 24px;
  margin: 0 0 16px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #afbddd;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
p {
  line-height: 1.65;
}
label {
  display: block;
  margin: 16px 0 6px;
}
input:not([type="checkbox"]),
select,
textarea {
  max-width: 100%;
  width: 100%;
  padding: 10px;
  border: 1px solid #7a8496;
  border-radius: 8px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

JavaScript

const select = document.querySelector("#country"),
  result = document.querySelector("#country-result");
function update() {
  result.textContent = select.value
    ? select.selectedOptions[0].textContent + " (" + select.value + ") selected."
    : "No country selected.";
}
select.addEventListener("change", update);
document.querySelector("#reset-country").addEventListener("click", () => {
  select.value = "";
  update();
  select.focus();
});

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  width: min(100%, 480px);
  background: white;
  border-radius: 20px;
  padding: 24px;
}
h1 {
  font-size: 24px;
  margin: 0 0 16px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #afbddd;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
p {
  line-height: 1.65;
}
label {
  display: block;
  margin: 16px 0 6px;
}
input:not([type="checkbox"]),
select,
textarea {
  max-width: 100%;
  width: 100%;
  padding: 10px;
  border: 1px solid #7a8496;
  border-radius: 8px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
</style>
</head>
<body>
<main
  ><h1>Where should we begin?</h1><label for="country">Country</label
  ><select id="country" aria-describedby="country-note"
    ><option value="">Choose a country</option
    ><option value="CA">Canada</option
    ><option value="DE">Germany</option
    ><option value="IN">India</option
    ><option value="JP">Japan</option
    ><option value="NZ">New Zealand</option
    ><option value="GB">United Kingdom</option
    ><option value="US">United States</option></select
  ><p id="country-note">A small illustrative list, not a complete country directory.</p
  ><p id="country-result" role="status">No country selected.</p
  ><button id="reset-country">Reset selection</button></main
>
<script>
const select = document.querySelector("#country"),
  result = document.querySelector("#country-result");
function update() {
  result.textContent = select.value
    ? select.selectedOptions[0].textContent + " (" + select.value + ") selected."
    : "No country selected.";
}
select.addEventListener("change", update);
document.querySelector("#reset-country").addEventListener("click", () => {
  select.value = "";
  update();
  select.focus();
});
</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

Use stable values and readable option labels. This teaching list has seven examples and sends nothing. For a real country picker, supply a maintained list, decide which territories your service supports, and localize labels. Keep selection separate from timezone or language assumptions.

Historical purpose: The stage-one 2014 archive recovery verified this exact detail purpose. This is an original modern implementation; no archived third-party code, credit link, remote script or guessed numeric preview mapping is reused.

Troubleshooting and limits

This is a small illustrative country/region list, not a complete geopolitical directory. The choices are local sample data. Keep valid option values and labels; do not use a sample list to infer a visitor’s location or eligibility.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going