Add a boarder to custom liquid css on product page

[adelaidefloral]

I've added a custom liquid field to certain products on my site directly in the site in a custom liquid block (not in the back end "edit code" section of the theme itself), using a generator because it was the easiest and most user friendly way to get what I needed with having zero code experience. This is the code:

<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
<label class="form__label-text custom" for="color-palette">Color Palette</label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="color-palette" name="properties[Color Palette]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>

I've used it to create two custom fields, "color palette" and "preferred floral varieties" on select products (https://www.adelaidecofloral.com/products/casket-spray). However, the fields that it generates doesn't have a border surrounding the text input field that the customer would click into and type their info. So the color and flower options just looks like random floating text with no where to input your choices - I only know to click on the empty space below because I know it's there - customers are not going to know that. I need to add a border to this custom liquid but have searched for hours trying to find the right code to add but nothing I try works, I assume because this is a custom liquid block and not part of the theme.liquid and therefore doesn't translate. Can someone please help me figure out how to add some code that would add a border to the text input fields? Thank you!!!

ETA: Just realized it's actually doing this on all text input forms on my site, not just the custom liquid block I added. The other text boxes on my site *used to* have borders around everything, so I'm not sure what changed?

[Made4uo-Ribe · Accepted solution]

Hi @adelaidefloral 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

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

And Sve. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[adelaidefloral]

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

[Made4uo-Ribe]

Welcome. You mention some of the borders are missing. Thinking the quantity buttons also one of them? let me know. Thanks!