How to know which CSS style is applied and from where (javascript)?

Question

I have an input element which is having some CSS applied by (I guess), a javascript function. How could I know which style is being applied (so that I can change/remove it) and from which funciton?

You can see my example here: http://impresionados.net/

When you click on the big search bar, its border becomes yellow and I don't know what is causing that nor how. I have tried adding the :focus pseudo class to that element in my CSS file, but it just adds to the yellow border overlapping it, it doesn't remove it. If I set the border to 0 on :focus, it doesn't take effect as you can see.

So how could I know which style is being applied and which code is applying it?

Thanks!

Answer 1

It's the chrome standard for outlining focussed input elements. These are so called "user agent styles" which might be hidden in the inspector - in that case you have to check "Show user agent styles" in the settings first. You can overwrite this with

input:focus{
   outline:0;
}

But be aware, that for usability reasons, it is highly recommended to indicate to the user that a certain element is currently in focus! So you should apply some focus styles which suit your theme.

For example you could do some slight inset boxshadow (and perhaps remove the initial text or at least make it more opaque):

#yith-s:focus{
    outline:0;
    box-shadow:inset 0 0 2px 1px #ccc;
}

Answer 2

Whenever i need to find information about styles applyed on my elements i use Chrome's inspoctor tool. All you have to do is right-click on the element you want information and press "inspect element."

In the right side you have information about what rules are applyed on the element, from what selector and from what file those selectors are. In your particular case you can induce the specific pseudo behavior by clicking on the "toggle element state" button: ! click to see image

For your textbox you'll need to use outline: none; on the focus pseudo-class. I have tested that right in the chrome's inspector by activating the :hover pseudoclass on the inspected element and added the outline:none in the selector "#yith-s:focus"

Answer 3

What you see is the yellow focus rect of the browser. You can hide it using:

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

Answer 4

In style.css which is located inside /wp-content/themes/peddlar-child/ folder, please change the following style

        #yith-s:focus {
                /*-webkit-box-shadow: 0px 0px 5px #007eff;  
                -moz-box-shadow: 0px 0px 5px #007eff;  
                box-shadow: 0px 0px 5px #007eff;*/
                -webkit-box-shadow: 0;  
                -moz-box-shadow: 0;  
                box-shadow: 0;  
                border: 0;
                background: none;
            }

to:

        #yith-s:focus {
                /*-webkit-box-shadow: 0px 0px 5px #007eff;  
                -moz-box-shadow: 0px 0px 5px #007eff;  
                box-shadow: 0px 0px 5px #007eff;*/
                -webkit-box-shadow: 0;  
                -moz-box-shadow: 0;  
                box-shadow: 0;  
                border: 0;
                background: none;
                                outline:none;
            }

There is no outline:none for the focus pseudo class.

Answer 5

in chrome, right click -> inspect element. you select the form and then you have a small button right next to element style

toggle element state

if you click it you can set the focus on the search bar and you'll see the css rule that puts the border

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

and it's a user agent stylesheet

Answer 6

Open up your in-browser developer tools, and inspect the element. It should show you all the active styles on the particular element.

If you can't see it, there should also be a tab called something along the lines of "Computed styles" or "Trace styles", which shows you ALL the styles (even the ones inherited from your user agent), and, depending on your browser/developer tool, where they come from.

Answer 7

It is a good practice to use css resets in order to override default browser behavior. You can look at normalize.css . You can use it as is or play with it to suite your project. For instance if you want all of your form input text, password, textarea and select to get rid of this yellow outline you can add the following to your reset file:

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}