A More Aesthetically Pleasing Select in Your Squarespace Forms

Forms in Squarespace are fast and easy to use … and in general, are very pleasing to to the eye. With one exception … a drop-down (or select) menu in a form. I understand why they look the way they do, but they don’t have to look that way if you want something better.

The Custom CSS snippet shown here will find any select menu in any of your forms across your website and reset it’s look a bit. Basically, it will just look like a regular text input – without the blue handles, tiny appearance and weird font.

/* select menu reset */
.form-wrapper select {
  background: #fafafa;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px;
  padding: 12px;
}

---

These statements have not been evaluated by the FDA. Mileage may vary. Restrictions apply. This is not legal advice. Side effects include but are not limited to: euphoria, uncontrolled smiling, and dry mouth. Code snippet offered as is, with no warranty. Do not use near an open flame. Batteries not included. Caution: Hot coffee is hot.