CSS Input / Form Styler

Style form inputs and generate the CSS.

Text

Border

Focus

Border: 1px

Radius: 8px

Pad X: 12px

Pad Y: 10px

Font Size: 14px

.input {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px #3b82f633;
}
.input::placeholder {
  color: #11182780;
}