Add a boarder to custom liquid css on product page

Topic summary

A Shopify store owner added custom text input fields (“Color Palette” and “Preferred Floral Varieties”) to product pages using a custom liquid block with generated code.

The Problem:
The generated fields lacked visible borders around the input boxes, making them appear as floating text with no clear indication where customers should click to enter information. Other text input forms on the site had borders, but these custom fields did not.

The Solution:
A community member provided CSS code to add borders:

.custom .field__input {
  border: 1px solid #A68A77;
}

This code should be added to the bottom of the theme’s main CSS file (main.css, base.css, style.css, or theme.css) found under Online Store > Themes > Assets.

Outcome:
The solution worked as needed. A follow-up question was raised about potentially missing borders on quantity buttons as well, which remains under discussion.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Thank you SO SO much! Worked exactly as I needed, appreciate the help!!