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

[Pooja122]

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 · Accepted solution]

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);
}

[Pooja122]

Hi Gurpreet,

Thank you. It worked.

But the solution which you have given is not working for reference fields or drop down list:

Is is possible to change blue color of border and selected option to Purple?

Thanks in advance.

Best regards,

Pooja

[Gurpreet07]

Below css responsible for border color of various types of form fields.

.select2-container-active .select2-choice, .select2-container-active .select2-choices {
border: 1px solid red; //color here
}

.field-has-reference .reference .select2-container-active {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
border-color: red; //color here
box-shadow: 0 0 10px red; //color here
}

[kshitij patil]

Hi Gurpreet,

I am facing the similar issue on portal.

Answer provided by you is working for other pages. But it is not working when I am checking on profile page. It is still in blue color when I am hovering on drop down list. 

Can you please help me to change blue color to yellow.

Thanks,

Kshitij