Firefox: :-Moz-Selection Selector Bug() Is There a Workaround

Firefox ::-moz-selection selector bug(?) is there a workaround?

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set:

/* Firefox sees this */
.green ::-moz-selection {
    background-color: #62BA21;
    color: white;
}

/* Other browsers see this */
.green ::selection {
    background-color: #62BA21;
    color: white;
}

In fact, in this case it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.

jsFiddle demo

::-moz-selection possible bug

Firefox can't parse ::selection, which is why it needs ::-moz-selection in the first place. Upon encountering ::selection, the entire block is ignored.

According to the spec:

When a user agent cannot parse the selector (i.e., it is not valid CSS
2.1), it must ignore the selector and the following declaration block (if any) as well.

You will have to keep on them separate lines for this to render correctly in Firefox.

Keep in mind that ::selection was removed from the CSS3 draft entirely.

Workaround for broken select with -moz-transform?

I've had problems like this before with elements that have been transformed, and I solved it with some JavaScript and extra CSS.

document.addEventListener("transitionend", function(event) {
    var style = event.target.style;
    if (event.propertyName.substr(-14) == "transitionend") {
        style.position = "absolute";
        style.left = "200px";
    }
});

You need to bind mozTransitionEnd, webkitTransitionEnd, etc.

How to remove the arrow from a select element in Firefox

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

I've come up with a simple workaround.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

Say this is your select menu:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

And lets assume the css class 'css-select' is:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

All feedback is welcome.

Targeting only Firefox with CSS

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

::selection background-color and color rendering in browsers

According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).

As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using

background:rgba(255, 255, 255, 0.99);

For more details, checkout the linked answer by tw16

---

Furthermore, this works for me on FF:

::selection { /* stuff */ }
::-moz-selection { /* stuff */}

But this does not:

::selection, ::-moz-selection { /* stuff */ }

But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.

Remove text indentation from select (Windows)

This is a combination of some answers, comments and my own IE11 hack. I've tested it in IE11, Edge, Chrome, Firefox (Windows) and Safari 10 (macOS) and it works:

.select-container {  overflow: hidden;}
select {  font-size: 18px;  height: 38px;  line-height: 38px;  padding: 0;  width: 100%;  background-color: red;  color: #000000;  display: block;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  outline: 0;  border-color: #000000;  border-width: 0 0 1px 0;  border-style: solid;}
option {  padding: 0;}

/* Firefox: */
@-moz-document url-prefix() {  select {    text-indent: -2px;  }}

/* Edge: */
@supports (-ms-ime-align: auto) {  select {    width: calc(100% + 4px);    margin-left: -4px;  }}

/* IE11: */
@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none) {  select {    width: calc(100% + 4px);    margin-left: -3px;  }}

<div class="select-container">  <select>    <option value="test1">Test 1</option>    <option value="test2">Test 2</option>    <option value="test3">Test 3</option>  </select></div>

---

Related Topics