Change the color of Search box border when we hover on it

Pooja122 · ‎08-06-2018

Hi,

It is OOB that when we hover on the search box on portal,it is high-lighted in sky blue color.

Is it possible to change the color of border from sky blue to dark purple on service portal?

Thanks in advance.

Regards,

Pooja

Gurpreet07 · ‎08-06-2018

If you are already cloned and customized search widget then simply add below css to the widget.

.form-control:focus {
border-color: black; //update border color here
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

View solution in original post

Gurpreet07 · ‎08-13-2018

Try below css

form-control:focus {
border-color: #66afe9; //change color here
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); //change color here
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); //change color here
}

Nirosha Uddandi · ‎08-07-2019

what will be the cause if it happens only for some users

Pallavi Shinde3 · ‎07-20-2022

What if we want to remove that hover color after clicking? I have tried many ways but didn't get the expected.