Rounded search bar for Integrity stack, as seen in Icon stack

[disadmin]

How can I make the search bar have rounded ends at the top of the blog page side bar in the Integrity Stack (rounded as seen in the Icon stack)? Another company is designing a site in Figma for our client and they want us to develop it. We REALLY want to use Pro for ease of use and updates and get awy from Figma. The search bar look is one of the things we’re finding hard to replicate in PRO.

[prakash_s]

Hello @disadmin,

Thanks for writing to us.

In order to get the border-radius on the search widget I would suggest you please add this custom CSS code under the Global CSS.

.form-search .search-query, .form-search input[type=search], .widget_product_search form .search-query, .widget_product_search form input[type=search] {
width: 100%;
margin-bottom: 0;
padding-left: 33px;
border-radius: 100em;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks