E2A Studio
Your Leg Up on DIY

Squarespace Tips & How-Tos

Tips, insights, and how-to articles highlighting ways to get the most out of using Squarespace to build your website.

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 below 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;
}
Sweet GIF showing the before and after

Sweet GIF showing the before and after

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.