Input fields

Form fields are set per theme, from the Theme Editor, in the Buttons & Forms section.

One setting applies everywhere at once: the search field, the newsletter form, the account and address forms, the contact form, and every dropdown. You do not style them page by page.

What is covered

• Text, email, password, number and search fields

• Multi-line fields (long messages, addresses)

• Dropdowns

Placeholder color is the only setting that applies to text fields alone — a dropdown has no placeholder.

Note: The basket and checkout fields are deliberately left untouched. They are rendered in an isolated component so that a payment form always stays legible and usable, whatever a theme does elsewhere.

Spacing

Vertical padding and Horizontal padding set the room around the text inside the field.

The two are independent: leave one empty and that axis keeps the spacing your theme already defines. This is handy to make fields taller without touching their left and right spacing.

Border

• Border width: The thickness of the outline, in pixels.

• Border radius: How rounded the corners are. 0 gives square corners.

• Border style: Solid, dashed, dotted, and so on.

Colors, state by state

The four tabs — Default, Hover, Focus and Disabled — each hold the same three colors:

• Background color

• Text color

• Border color

A color left unset on a state simply keeps the Default one, so you only fill in what actually changes.

• Default: The resting field

• Hover: The pointer is over the field

• Focus: The visitor is typing in it

• Disabled: The field cannot be filled in

Two settings sit apart, on the tab they belong to:

• Placeholder (Default tab): the color of the hint text shown while the field is empty.

• Disabled opacity (%) (Disabled tab): how faded a disabled field looks.

The focus ring

On the Focus tab, Ring color, Ring width and Ring offset draw a halo around the field being filled in.

The ring only appears once you set a color. Width then defaults to 2px, and offset pushes the ring away from the border.

A visible focus ring is what lets someone navigating with the keyboard know where they are on the page. We recommend setting one, with enough contrast against your background.

Dropdowns

As soon as the fields have settings, dropdowns drop their browser look so they match the rest of your forms, and get an arrow drawn in their own text color — so the arrow follows every state automatically. Room is kept for it, so a long option never runs underneath.

These settings are a base

They are written with no weight at all, on purpose. Any rule you write in your theme, or in the Eshop Editor, still wins over them.

So you can set the general look here, then refine one field with Custom CSS:

#app .searchForm input { text-align: center; }