How do I remove the borders from Squarespace form fields?

Remove Form Field Borders — Squarespace CSS

Remove all borders and add a subtle background color for a minimal, modern form look. This clean style works well on dark and light backgrounds.

If you want a bottom-border-only style instead, set border to none and then add just a border-bottom. This gives a material design feel that's popular in modern forms.

/* Minimal background-only style */
.form-item input,
.form-item textarea,
.form-item select {
  border: none !important;
  background-color: #f0f0f0 !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
}

/* Or: bottom-border-only style */
.form-item input,
.form-item textarea {
  border: none !important;
  border-bottom: 2px solid #ddd !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
}

.form-item input:focus,
.form-item textarea:focus {
  border-bottom-color: #e63946 !important;
  outline: none !important;
}

Build borderless forms with our Form Styler toolTry it free →