How to update the color of the placeholder text in search box | Community
Skip to main content

How to update the color of the placeholder text in search box

  • July 28, 2021
  • 8 replies
  • 0 views

Ronit12

Hi 

I am looking for help to update the placeholder color of my search box.

Any help is appreciated

Thanks in advance

8 replies

Pulkit12
  • July 28, 2021

Hi Ronit

Please add the below code at the bottom of your style.css file 

.search-full ::placeholder {
   color:red;
}

Let me know if it solves your issue 

 

Thanks

Pulkit


Ronit12
  • Author
  • July 31, 2021

Thanks ☺️ pulkit
It works, I have few more questions can you help me on this


Pulkit12
  • July 31, 2021

Hey Ronit,
Yes you can ask your questions I am happy to help you


Ronit12
  • Author
  • July 31, 2021

I want to update the text size of the placeholder


Pulkit12
  • July 31, 2021

Hi Ronit

Please placed the below code at the bottom of your style.css
search-full ::placeholder {
color:red;
font-size: 18px; // you can update the value of your choice
}

Thanks


  • August 1, 2021

Do I know to way to change shape of search bar.


Ifra
  • August 1, 2021

Add the below CSS code to your style.css file at the end of all code:

.search.search-full input[type="search"]{
border-radius:0;
}

 

If you add little bit of border-radius then increase the number in border-radius CSS property, see how I'm doing

.search.search-full input[type="search"]{
border-radius:5px; //number of border-radius can be updated.
}

 

Increase more:

.search.search-full input[type="search"]{
border-radius:10px; //number of border-radius can be updated.
}

 

So you can increase the border-radius number.

Thanks

 


  • August 2, 2021

Working. It will look fine with blue border, how can I add??