How can I modify my search bar text, color, and border shape?

Store Design

Topic summary

Goal: adjust search bar placeholder text (letter spacing to 0, color to black), change border shape, and make the search section background gray—especially on mobile; also remove left/right spacing.

Actions and solutions:

  • CSS added to base.css to target the label: “.template-search__search .field__label { letter-spacing: 0; color: #000 !important; }” and input border shape: “.search__input.field__input { border-radius: 50px; }”. Text changes were confirmed and accepted. Note: a 50px border-radius creates a rounded/pill shape, not a rectangle.
  • For mobile (max-width: 767px): CSS proposed to style “.template-search__search” with full height, gray background, padding (top 20px, sides 0, bottom 50px), and margin 0. There’s a likely typo: “back ground-color” should be “background-color”.
  • To address side spacing, further CSS suggested: “.template-search__header { background-color: gray; }”. This changes header color but may not directly remove horizontal spacing.

Context and media:

  • Screenshots are central for demonstrating the desired gray area and removal of side gaps.

Status: Partially resolved (text color/spacing). Mobile background and spacing adjustments are attempted; effectiveness and border shape preference (rectangle vs. rounded) remain open.

Summarized with AI on January 21. AI used: gpt-5.
1

Hello,

I need to change my search bar text and color. I want to reduce letter spacing of placeholder, and change color to black. I also need help making borders rectangle, and the section background gray.

My store url is: designsfordivine.com

I appreciate any help

Thanks very much

1 Like
2

Hello @omero

.template-search__search .field__label {
  letter-spacing: 0;
  color: #000 !important;
}
.search__input.field__input{
  border-radius: 50px;
}

Please add this css in your base.css file.

Thanks.

1 Like
3

Hey, Thank you, this helped me edit the text so I accepted as solution. If you have an idea about how to make this part gray?

Screen Shot 2023-08-18 at 20.47.02.png
Screen Shot 2023-08-18 at 20.47.02.png946Ă—338 51.5 KB

4

Only for mobile?

5

forgot to mention that, but yes for mobile only

1 Like
6 
@media only screen and (max-width: 767px) {
  .template-search__search{
      height: 100%;
      background-color: gray;
      padding: 20px 0 50px;
      display: block;
      margin: 0;
  }
}

Add this css

1 Like
7

Hello, thanks very much, can you help me remove the right and left space?

omero_1-1692382441032.png
omero_1-1692382441032.png840Ă—922 427 KB

like this screenshot below

omero_0-1692382384326.png
omero_0-1692382384326.png798Ă—1102 693 KB

8

Hello @omero

.template-search__header{
    background-color: gray;
}

Add this css.
Thanks.