Contact Form Drop Down Help

Store Design
, , , ,

Topic summary

A user needs help styling a dropdown menu on their contact form at runtheblade.com/pages/contact to match the sizing and appearance of other form fields.

Main Issues:

  • Dropdown container is too small compared to other input boxes
  • Border thickness doesn’t match other form elements
  • User wants “What is this regarding?” label to appear inside the dropdown container (as placeholder text)
  • Styling needs black background with white outline to match the form’s design

Solutions Provided:
Two developers offered CSS code snippets to add to either styles.css or base.css files, addressing:

  • Width adjustment to 100%
  • Padding modifications using theme variables
  • Border styling to match other inputs
  • Custom dropdown arrow styling

The helper clarified that the label text naturally appears outside the container by default, suggesting the user add “What is this regarding?” as the first dropdown option instead. The discussion remains open as one developer requested a screenshot to implement the exact desired design.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hey i want the container of the dropdown to be the same sizing as the other boxes

the menu is quite a bit too small

my page is : – Run The Blade

1 Like
2

Hi @VicexGrips

Please share store password.

image
image1207×482 5.08 KB

4

password is : enter

thank you

1 Like
5

Hi @VicexGrips

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottow of the file:
.contact-form__form select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.4;
  background-color: #fff;
  color: #000;
  appearance: none;
  box-sizing: border-box;
  display: block;
}

.contact-form__form select {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

[classname="request-type"] {
  width: 100%;
  display: block;
  margin-bottom: 16px;
}

image
image1192×614 126 KB

image
image444×520 50.5 KB

6

please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.contact-form__form select#request-type{width: 100%; padding: var(--padding-lg) var(--padding-xl);}

image
image1366×768 199 KB

7

How can i have the “what is this regarding?” in the container.

8

also not the same css - style as the form - it needs to be white

9

@VicexGrips what is this regarding? is a label, it will always be outside container, do you want drop down background to be white?

10

black backround - white outline

this contact doesnt?

11

@VicexGrips you will need to have What is this regarding? as a drop down option in the form, if you want it like the given website

your form has black background and white outline already

12

i want the message in the container

and no the outline isnt the same thickness as the others

it looks off is what im trying to say

1 Like
13

like the “what is this regarding”

14

you can put What is this regarding? in the drop down options and it will look fine, for outline please add this css

.contact-form__form select#request-type{width: 100%; padding: var(--padding-lg) var(--padding-xl); border: var(--style-border-width-inputs) solid var(--color-input-border);}

image
image1366×768 208 KB

15

Hi @VicexGrips

Please send me a screenshot of the design you want, and I will set it up exactly like that.