[jasoncollege24]

I’ve changed the colors in the search bar, and it’s button, but when you click inside the search bar, a new blue border appears around the search widget.

I’d like to either change the color of that border, or remove it completely, but I can’t seem to find where that border is specified in order to override it.

Site is located at http://blog.jasoncollege24.com

Website: blog.jasoncollege24.com

[Zed]

This looks like a browser feature (I only see it in Chrome) to outline the focused form element.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[jasoncollege24]

Nope… I use Chrome, and it doesn’t do the same thing on my contact & feedback form, or the old hand-written version of my contact form, so I don’t think it’s just a browser feature. Pretty sure that border, and it’s color are specified somewhere in the code.

Contact form is located here http://blog.jasoncollege24.com/contact-feedback/
Old contact form http://jasoncollege24.com/contactus/form.html

[Zed]

On the other hand, I am sure there is no such color specified in the theme’s code, as that border is only visible on Chrome and most likely other Webkit-based browsers (like Safari).

The contact form inputs use a :focus border color while the search form does not set such a color, leaving the browser to use its own default style rules.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[jasoncollege24]

Found it by overriding the :focus outline style specified by the user agent style sheet.

For anyone else looking to resolve a similar styling issue, pages that have any style elements unspecified will have them specified by any browser that has it’s own built in styling elements, such as Google Chrome. (User agent style sheet) Overriding it is as easy as specifying that style, and the desired options in your CSS files.

[Author]

Posts