How can I change the shape of the Search box? | Community
Skip to main content

How can I change the shape of the Search box?

  • July 9, 2021
  • 5 replies
  • 0 views

Instead of the search box having round edges, how can I make it be a rectangle shape?  See image for how I would like it to look. Thank you in advance.

5 replies

Ifra
  • July 10, 2021

Hi Victoria,

Add the given code at the bottom of your stylesheet:

//May be you have different class of search bar so you can remove the border-radius

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

 

If you have a query, let me know.

Thanks

 

 

 


  • Author
  • July 11, 2021

Hi Ifra,

Thank you!  This is exactly what I needed.  One more question - how can I change the height of the box?  I want to make it slightly bigger.

Thank you in advance,
Victoria


Ifra
  • July 12, 2021

For height changement, you can add the height in the given code like:

.search-full.search input[type="search"]{
border-radius: 0;
height: 60px //anything you want
}

 

Thanks

 

 


  • Author
  • July 12, 2021

Thank you, Ifra  :)


Ifra
  • July 13, 2021

:)