Valid way for img in option?

Question

I tried to set a img before my option field. I tried

option::before
  {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url();
  }

But it doesn´t work. How to do it? It is not displayed in Firefox inspector. Normally there should be displayed ::before

You need to specify an image url in there... Apart from that: what does "it doesn't work" mean? Be _precise_ please. Wrong result? Rule not applied? An error? — arkascha, Dec 13 '15 at 12:21
It is not displayed in Firefox inspector. Normally there should be displayed ::before — ElDiabolo, Dec 13 '15 at 12:26

score 1 · Accepted Answer · answered Dec 13 '15 at 12:26

Pseudo selectors are like empty DOM elements. And any element to be styled needs to have some content.

Your ::before pseudo element needs some content, which you can simply fill in using 'content' property.

option::before {
    content: '';
    display: inline-block;
    ...
}

Also note, you can use 'content' property to any HTML DOM element. And for pseudo selectors, they need to have a 'display' property along, unless positioned absolute or fixed.

Valid way for img in option?

1 Answers1