Search bar changes on CSM

[SNEnthu]

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? 

[Sid_Takali · Accepted solution]

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

[Sid_Takali · Accepted solution]

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

[Sid_Takali · Accepted solution]

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 

[SNEnthu]

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. 

[MehakS]

By applying this it is not working in test instance. In dev it worked. Do you have any suggestions?