override default focus with css or reseting it

Question

I want something like css reset , but only for the :focus . If there's none of this yet, would be good to know the possible properties to reset(override) in order to make new :focus that will override the previously one(set by the web-site css). For example, z-index may effect on :focus for some specific elements in some browsers. So the :focus should include z-index with some huge number and in order to work it should include position too. perhaps it's wrong example, but I think you got the idea here.

Answer 1

You may want to post some code with some examples of problems that you are having in a jsfiddle or in the question.

That said, there are some elements that tend to get default styling for :focus in the browser - input, a. There is some great information here about potential fixes, for instance:

/* put universal focus changes here */
*:focus {
  outline: none;
}

/* put anchor focus changes here */
a:focus {
  ...
}

/* put input focus changes here */
input:focus {
  ...
}

I'm not certain what you are trying to accomplish with the z-index setting, but you could handle it as above.