Remove or change search widget active border

Forums » WordPress » Mantra » How To

  • Author
    Posts
  • January 4th, 2017 at 11:55 #41684
    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

    January 4th, 2017 at 23:03 #41708
    Zed
    Cryout Creations mastermind

    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.
    January 5th, 2017 at 15:20 #41719
    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

    January 7th, 2017 at 15:34 #41798
    Zed
    Cryout Creations mastermind

    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.
    January 8th, 2017 at 08:14 #41823
    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
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Remove or change search widget active border’ is closed to new replies.