Input Field Generator
Style text inputs with padding, radius, border and a focus ring. Interactive preview showing the focus state. Copy the CSS.
Click the field to see the focus state.
.field label { display: block; margin-bottom: 6px; font-size: 13px; color: #e2e8f0; }
.field input {
width: 100%;
padding: 10px 14px;
font-size: 14px;
color: #e2e8f0;
background: #12151d;
border: 1px solid #232836;
border-radius: 10px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus {
border-color: #6d5efc;
box-shadow: 0 0 0 3px #6d5efc33;
}
<!-- HTML:
<div class="field"><label>Email</label><input placeholder="you@example.com"></div> -->About the input field generator
The focus state is the part of an input that matters most and gets removed most often. Stripping the default outline without replacing it makes a form unusable by keyboard, which is why this generator treats the focus ring as a first-class control.
A ring built from box-shadow rather than a border is the usual approach, because it does not change the element's size and therefore does not shift the layout when focus moves.
How to use it
- 1Set padding and radius to match your buttons.
- 2Choose background, text and border colours.
- 3Set the focus colour and ring width, then click the preview to see it.
- 4Copy the CSS and HTML.
Worth knowing
- Using box-shadow for the ring avoids the layout shift a thicker border would cause on focus.
Questions
Why use box-shadow for the focus ring instead of a border?
A border changes the element's size, so the layout jumps when focus arrives. box-shadow paints outside the box without affecting layout.
Can I remove the default outline?
Only if you replace it with something at least as visible. Removing it outright makes keyboard navigation impossible to follow.
How do I style the placeholder?
Use the ::placeholder pseudo-element. Keep it noticeably lighter than the real value, but not so light that it fails contrast.