How to fix the CSS code for the Form?

[ArafatWeb]

Hi,

I added a new field, the “Product Name” Dropdown on the Ride theme below:

https://cybernightmarket.com/pages/contact

Can anyone give me the CSS code for this so that it looks better and can be adjusted with my existing theme?

[BSSCommerce-B2B]

@ArafatWeb , use this code at the end of base.css file

#\\\"product-name\\\" {
    background:  transparent!important;
    color: white!important
}
select#\\\"product-name\\\" option {
   color: #000!important
}

result:

[BSSCommerce-HDL]

Hi @ArafatWeb ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[exertweb]

@ArafatWeb
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

[Made4uo-Ribe]

Hi @ArafatWeb

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.

.contact .field {
    margin-top: 20px;
}

select#\\\"product-name\\\" {
    border: none;
    box-shadow: none;
}

select#\\\"product-name\\\" option, select#\\\"product-name\\\" {
    background:#1f1f21;
    color: rgb(var(--color-foreground));
    width: 100%;
    padding: 1.5rem;
}

select#\\\"product-name\\\"::after,select#\\\"product-name\\\"::before, select#\\\"product-name\\\" {
    border: .1rem solid transparent;
    border-radius: var(--inputs-radius);
    box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
    transition: box-shadow var(--duration-short) ease;
}

And Save.

result:

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

[ArafatWeb]

Can you do this for the page below as well?

https://www.nukit222.com/pages/contact

I want the same dropdown on the page, the liquid, and the CSS code.

Thanks so much!

[ArafatWeb]

Here it is:

<label for="product-name">Product Name:
<select name="product-name" id="product-name">
{% for product in collections.all.products %}

{{ product.title }} {% endfor %}

[BSSCommerce-B2B]

@ArafatWeb , Change your code to this one

And add this code before in “theme.liquid” file

Result: