28 CSS Input Field Designs 03 / 28
Neon Glow
Cyan neon-glow input.
The code
<label class="if-neon"> <span class="if-neon-label">SECURE TOKEN</span> <input type="text" name="token" placeholder="sk_live_••••••••••••" required /> </label>
<label class="if-neon">
<span class="if-neon-label">SECURE TOKEN</span>
<input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>.if-neon {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-neon-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-neon input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition:
border-color 0.2s,
box-shadow 0.2s,
background 0.2s;
}
.if-neon input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-neon input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow:
0 0 0 1px #6cffff,
0 0 16px rgba(108, 255, 255, 0.45),
inset 0 0 12px rgba(108, 255, 255, 0.12);
} .if-neon {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-neon-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-neon input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition:
border-color 0.2s,
box-shadow 0.2s,
background 0.2s;
}
.if-neon input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-neon input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow:
0 0 0 1px #6cffff,
0 0 16px rgba(108, 255, 255, 0.45),
inset 0 0 12px rgba(108, 255, 255, 0.12);
}