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!

Or you can use mozilla firebug or even the developer tools in ie. — MaVRoSCy
– MaVRoSCy, Commented Dec 4, 2013 at 10:00
which browser you have if Firefox means use firebug addon or chrome means Use chrome developer tools. — Mr.G
– Mr.G, Commented Dec 4, 2013 at 10:01
@MaVRoSCy actually this problem appears in chrome, since the yellow rectangle is a Chrome UAS and won't appear in the other browsers. And fyi, Jacobo, your searchbar is broken in firefox. — Christoph
– Christoph, Commented Dec 4, 2013 at 10:09

fDruga · Accepted Answer · 2013-12-04 10:04:56Z

4

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"

using chrome's inspector

answered Dec 4, 2013 at 10:04

fDruga

2691 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christoph · Accepted Answer · 2013-12-04 10:09:53Z

2

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;
}

edited Dec 4, 2013 at 10:09

answered Dec 4, 2013 at 9:57

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

1 Comment

Jacobo Polavieja Over a year ago

Thank you very much Cristoph, that was exactly is... I was looking in the wrong place, and didn't have a clue about the user agent styles not showing up in the tools. I do plan to have a focus for usability, was just trying to get this right first ;). Thanks again, it was very helpful and clear.

Vikram Deshmukh · Accepted Answer · 2013-12-04 09:57:01Z

1

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

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

answered Dec 4, 2013 at 9:57

Vikram Deshmukh

16.1k4 gold badges40 silver badges44 bronze badges

Comments

Ravimallya · Accepted Answer · 2013-12-04 09:58:01Z

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.

andrei · Accepted Answer · 2013-12-04 09:59:05Z

1

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

answered Dec 4, 2013 at 9:59

andrei

2,8902 gold badges25 silver badges36 bronze badges

Comments

Nix · Accepted Answer · 2013-12-04 09:59:51Z

1

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.

answered Dec 4, 2013 at 9:59

Nix

6,0684 gold badges34 silver badges53 bronze badges

5 Comments

Christoph Over a year ago

actually, there is a setting "Show user agent styles".

Nix Over a year ago

@Christoph Yes, Chrome DevTools has that, but every in-browser developer tool is different. Opera for example only shows UA styles in the computed tabs. ;)

Christoph Over a year ago

Actually that's not true unless you are speaking of old opera version which don't run on the same engine like chrome. When you have the uas option checked, you see the ua styles also in the styles tab.

Nix Over a year ago

I was talking about Opera 12 (Presto) – but it is irrelevant, the point still stands. Different browser == different dev tool.

Christoph Over a year ago

Well, in case you didn't notice: Opera runs with the Chromium engine now (Blink), so the devtools from Opera and Chrome are exactly alike now.

blaise · Accepted Answer · 2013-12-04 10:19:30Z

1

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;
}

answered Dec 4, 2013 at 10:19

blaise

3931 gold badge5 silver badges16 bronze badges

1 Comment

Jacobo Polavieja Over a year ago

Hey! Thanks for the tip! As the theme comes from a famous studio, I thought they would have a good reset included. It seems to have some kind of reset css, but may not be as good as the one you mentioned. Will definetely look into it. Thanks again!

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related