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

[omero]

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

[webizito · Accepted solution]

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.

[omero]

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?

[webizito]

Only for mobile?

[omero]

forgot to mention that, but yes for mobile only

[webizito]

@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

[omero]

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

like this screenshot below

[webizito]

Hello @omero 

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

Add this css.
Thanks.