Change the form select dropdown arrow colour

Squarespace CSS form select dropdown arrow colour

By default, select dropdown arrows can be a bit stubborn when it comes to styling. But with a simple line of CSS, you can easily change their colour to better reflect your brand palette.

Add this CSS to your custom CSS editor:

.form-field-border-all .sqs-block-form .form-item select ~ div{
  fill:var(--tweak-form-block-title-color);
}

Changes the arrow colour by applying the same variable used for form titles: --tweak-form-block-title-color.


If you want a custom colour instead of using a variable, just swap out the var(...) with a HEX or RGB value, like so:

fill: #000000; /* black */
 


Found this tutorial helpful?
Next
Next

Best Squarespace Promo Codes