- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-04-2024 02:00 AM
Hi guys, i want to change the search bar to rounded corners.
As per my understanding i need to makes changes on the border-radius.
Can anyone please tell me how i can achieve that?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-04-2024 10:16 AM
Hi @SNEnthu You don't need to Clone/Customize widget for this kind of requirement. Just CSS override will work.
Follow below steps
1. Ctrl + right Click
2. Edit page properties
3. Add below CSS code in Page Specific CSS field
#homepage-search input{
border-radius:24px !important
}
4. Save and verify the result
Please mark my response Correct/Helpful
Regards,
Sid
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-04-2024 10:33 AM
Hi @SNEnthu One simple correction, follow above mentioned procedure and add below CSS Code
#homepage-search input{
border-radius:24px 0px 0px 24px !important
}
#homepage-search div[widget] .input-group .input-group-btn > button {
border-radius:0px 24px 24px 0px !important
}
Result
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-04-2024 10:16 AM
Hi @SNEnthu You don't need to Clone/Customize widget for this kind of requirement. Just CSS override will work.
Follow below steps
1. Ctrl + right Click
2. Edit page properties
3. Add below CSS code in Page Specific CSS field
#homepage-search input{
border-radius:24px !important
}
4. Save and verify the result
Please mark my response Correct/Helpful
Regards,
Sid
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-04-2024 10:33 AM
Hi @SNEnthu One simple correction, follow above mentioned procedure and add below CSS Code
#homepage-search input{
border-radius:24px 0px 0px 24px !important
}
#homepage-search div[widget] .input-group .input-group-btn > button {
border-radius:0px 24px 24px 0px !important
}
Result
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-08-2024 02:09 AM
Hi Sid, Thank for your response.
The solution is helpful.
If anyone has the same requirement please follow the Simple correction . The first solution will only round the corners for search bar not the input search button.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-08-2025 03:43 AM
By applying this it is not working in test instance. In dev it worked. Do you have any suggestions?