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-HDL · Accepted solution]

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 </head> tag:

<style>
select#\\\"product-name\\\" {
    margin-bottom: 20px;
    height: 50px;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-weight: bold;
    color: #b0afbf;
    border: 1.5px solid gray;
}
</style>

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 😍

[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 · Accepted solution]

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 </head> tag:

<style>
select#\\\"product-name\\\" {
    margin-bottom: 20px;
    height: 50px;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-weight: bold;
    color: #b0afbf;
    border: 1.5px solid gray;
}
</style>

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 </head> tag:

<style>
.contact select {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    width: 100%;
    height: 4.5rem;
    position: relative;
    margin: 0 0 25px;
    padding: 0 1.5rem;
    box-shadow: none;
    outline: none;
}
</style>

[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 · Accepted solution]

Here it is: 


<label for=\"product-name\">Product Name:</label>
<select name=\"product-name\" id=\"product-name\">
{% for product in collections.all.products %}
<option value=\"{{ product.title }}\">{{ product.title }}</option>
{% endfor %}
</select>

[BSSCommerce-B2B]

@ArafatWeb , Change your code to this one

<div class="grid__item input-full">
<label for=\"product-name\">Product Name:</label>
<select name=\"product-name\" id=\"product-name\">
{% for product in collections.all.products %}
<option value=\"{{ product.title }}\">{{ product.title }}</option>
{% endfor %}
</select>
</div>

 And add this code before </head> in "theme.liquid" file

<style>
label[for="\\\"product-name\\\""], #\\\"product-name\\\" {width: 100%}
</style>

Result: