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.
Phone with Country the 13th of 28 designs in the 28 CSS Input Field Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="if-phone">
<span class="if-phone-label">Phone</span>
<span class="if-phone-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-phone {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
font-size: 11px;
color: #b8b6d4;
}
.if-phone-label {
font-weight: 600;
}
.if-phone-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-phone-wrap:focus-within {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.if-phone 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-phone select option {
background: #1a1a22;
color: #f0eeff;
}
.if-phone input {
background: transparent;
border: 0;
outline: none;
color: #f0eeff;
font-size: 14px;
padding: 10px 12px;
min-width: 0;
}
.if-phone input::placeholder {
color: #b8b6d4;
}