Weird Behavior in Firefox with Outlines and Pseudo-Elements

Weird behavior in Firefox with outlines and pseudo-elements

Now used to

box shadow

as like this

.main {
  position: relative;
  width: 100px;
  z-index:1;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
  box-shadow:0px 0px 0px 3px #00f;
}
.main:after {
  content: 'Hello';
  position: absolute;
  text-align: center;
  bottom: -50px;
  left:0;
  right:0;
  z-index:2;
}

.wtf {
  width: 400px;
  margin: 90px auto;
}

Demo

Pseudo element affecting outline

You can change the outline style to box-shadow:

outline:1px solid black;

to:

box-shadow: 0px 0px 0px 1px black;

In Firefox a special character used with the css content property is way thinner than in e.g. Safari/Chrome

I've noticed this too with other glyphs in the past; on certain glyphs the browsers just don't render the same! Have a look at this thread for another example. I'd suggest for this problem that you should use either an icon font (you can use a generator like IcoMoon), or alternately an SVG file.

:before && :after pseudo elements not showing Firefox

You cannot use ::after and ::before on elements that cannot have content, such as <input /> or <img />.

::after and ::before work like this:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

Here, there cannot be ***content*** to surround with pseudo elements.

firefox 3.x doesn't support background images in Pseudo-classes?

Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.

Firefox ignores outline and focus styles on select elements when using Tab

This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.

If you do opt to do this, I have had success in the past with the following kludge:

select {
    appearance: normal;
        -webkit-appearance: none;
        -moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}

Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.

---

Related Topics