How to change Search box focus color when clicked on it?

Dazzling
1

When you click in the standard widget search box, there appears on the edges of the box a blue glow. How can I change that color?

2

@UserX

By default it is styled like this. Add this code to Theme Options - Other - Custom CSS and add your own styling to it or replace the existing ones.

.form-control:focus {
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}
3

Thank you. :slight_smile:

That worked in changing the border color, but there is still a blue glow behind that. How can I change the glow to the color I want, or just get rid of it altogether?

4

Glow is from the same code I provided above generated by box-shadow

Just edit it like this:

.form-control:focus {
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
5

Sorry, I wasn’t paying attention to the rgba color codes. In Photoshop I figured out the codes I needed and now I have a nice green glow around the search box. Thanks for your help, I really appreciate it.