28 CSS Input Fields13 / 28

Pure CSSMIT licensed

Phone with Country

Phone number input with a native <select> for the country dialling code. Semantic, accessible by default, and styled to match the input seamlessly.

Published

Live Demo
Try it

The code

<label class="if-13">
  <span class="if-13-label">Phone</span>
  <span class="if-13-wrap">
    <select aria-label="Country code" name="country">
      <option value="+44">🇬🇧 +44</option>
      <option value="+1" selected>🇺🇸 +1</option>
      <option value="+91">🇮🇳 +91</option>
      <option value="+33">🇫🇷 +33</option>
      <option value="+49">🇩🇪 +49</option>
      <option value="+81">🇯🇵 +81</option>
    </select>
    <input type="tel" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
  </span>
</label>
.if-13 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-13-label {
  font-weight: 600;
}

.if-13-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.if-13-wrap:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.if-13 select {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 10px 28px 10px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239d9bbf' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.if-13 select option {
  background: #1a1a22;
  color: #f0eeff;
}

.if-13 input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.if-13 input::placeholder {
  color: #b8b6d4;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Phone with Country
Source: https://codefronts.com/components/css-input-fields/phone-with-country/

Phone number input with a native <select> for the country dialling code. Semantic, accessible by default, and styled to match the input seamlessly.
## HTML
```html
<label class="if-13">
  <span class="if-13-label">Phone</span>
  <span class="if-13-wrap">
    <select aria-label="Country code" name="country">
      <option value="+44">🇬🇧 +44</option>
      <option value="+1" selected>🇺🇸 +1</option>
      <option value="+91">🇮🇳 +91</option>
      <option value="+33">🇫🇷 +33</option>
      <option value="+49">🇩🇪 +49</option>
      <option value="+81">🇯🇵 +81</option>
    </select>
    <input type="tel" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
  </span>
</label>
```
## CSS
```css
.if-13 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-13-label {
  font-weight: 600;
}

.if-13-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.if-13-wrap:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.if-13 select {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 10px 28px 10px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239d9bbf' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.if-13 select option {
  background: #1a1a22;
  color: #f0eeff;
}

.if-13 input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.if-13 input::placeholder {
  color: #b8b6d4;
}
```

How this works

A phone input with country code select pairs a native select element (flag emoji + dial code) with an input type="tel" in a single focus-within ring. The wrapper uses grid-template-columns: auto 1fr so the select shrinks to its content and the tel input takes the rest.

The select is stripped with appearance: none and given a data-URI chevron so it visually matches the input. type="tel" triggers the numeric keypad on iOS and Android without imposing a format — that's a UI shell for MFA flows (Twilio Verify, Stripe Identity, Auth0), with real E.164 validation left to libphonenumber-js on submit.

Make it yours

  • Swap the flag option list for your supported countries; store the dial code in value.
  • Retint focus-within border and box-shadow to your brand accent (currently a red ring).
  • Recolor the chevron by editing the inline SVG stroke value in the data URI.
  • Widen max-width or drop it entirely so the field stretches inside a checkout column.

Gotchas — read before shipping

  • type="tel" gives you no format validation — treat the value as free text and validate server-side or with libphonenumber-js.
  • Flag emoji render as monochrome boxes on Windows Chrome; ship an SVG flag sprite if that matters for your audience.
  • iOS renders select as a full-screen wheel — you can't restyle that surface, only the closed state.

Browser support

ChromeSafariFirefoxEdge
20+14+57+20+

The tel input and select are universal; only the appearance-none chevron needs a modern engine.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →