How can I create a custom colored text box with Liquid code?

[jianimo1]

I'm trying to create a custom liquid code for my products. I want the text box to look similarly to the below. The text box should have multiple rows of customized data and the color. 

p class="line-item-property__field">   <label for="custom-field"></label>   <input id="custom-field" type="text" name="properties[Your custom field]"> </p>

p class="line-item-property__field">   <label for="custom-field"></label>   <input id="custom-field" type="text" name="properties[Your custom field]"> </p>

I tried the above, but not sure how to make it wider and add multiple rows/color to it. I would like to use #F1F1F1 color. 

Any advices are appreciated greatly.

[ZestardTech]

Hello there,
Please add this code.

<p style="background-color:#F1F1F1;" class="line-item-property__field"> <label for="custom-field"></label> <input id="custom-field" type="text" name="properties[Your custom field]"> </p>

[jianimo1]

It did this. Do you know how to remove the border outline but still have the ability to write text?

[Musfirah]

Hi @jianimo1 , to remove the border you can add border:none or border:0.
You can also try adding border-color:transparent if the border is still visible.