[Resolved] Border color on active search form – where to adjust that?

[Chris]

Hey,

I’m trying to figure out how to adjust the border color/width of my search input when active (someone types in it). I’m not sure if that’s a generatepress setting, or something I need to adjust via css.

You can see it at https://rev.press in the sidebar. If you enter your curser and start typing, a heavy black border appears.

Appreciate any help!

Chris

[Leo]

Hi Chris,

I can see the border you are referring to but I believe that’s added by the browser and not something we can change unfortunately.

The reason why I think it’s a browser thing is because it shows up different on Firefox:
https://www.screencast.com/t/6AWaEhuYxab

Couple of relevant articles from a quick search:
https://www.askvg.com/fix-google-chrome-showing-thick-black-border-highlight-on-text-box-and-other-focused-items/
https://www.askvg.com/tip-how-to-remove-black-border-outline-when-you-click-inside-text-input-box-in-google-chrome/

[Chris]

Hi Leo,

Thanks, I found that setting in chrome ( chrome://settings/?search=show+a+quick+highlight ) and turned that on and off and that seems to be something different. Also, the black border doesn’t affect my contact form. It seems to be specific to the search widget…

Chris

[Chris]

I see GeneratePress has a similar effect on their search bar – if you go to the top of this page and enter your curser, no change, but if you start typing, there’s an extra border. It looks a little broken there too, since the right side just kind of dead ends into the button, it looks like something isn’t right with it.

I see firefox is different on that too… I wonder if it’s some js or css triggering it that isn’t compatible with firefox?

Chris

[Fernando]

Hi Chris,

Browsers have default CSS code for some elements. Can you try adding this through Appearance > Customize > Additional CSS?:

.inside-right-sidebar .wp-block-search__input:focus {
    border: solid 3px #ff0000;
}

I tested this custom on Chrome and Firefox and it seems to be working.

[Chris]

Hi Fernando,

That css is triggered on focus – when a curser is put into the search box. But once typing begins, the black border is triggered again. I’ve got the css added right now on https://rev.press (search box, low in right sidebar),

Chris

[Fernando]

I see. Leo’s correct. This seems to be a core Chrome Browser design.

Can you try adding this CSS as well?:

input:focus, textarea:focus, select:focus{
        outline: none;
}

[Chris]

Oh yes, that’s a much nicer user experience 🙂 A small thing really, but that black border annoyed me 🙂

Thank you both for helping me with this!

Chris

[Fernando]

You’re welcome, Chris!

[Author]

Posts