4

I have the following pseudo-element:

input[type=radio].selected::before

In internet explorer the pseudo-elemen doesn't show at all, so I decided to take a look. I find the selector in the inspector (The selector in the inspector would be a great childrens-book!) But all properties are striked. (ie overwritten/not valid). Most attributes are not overridden by other attributes. Is this default behaviour in IE or does this mean that the styling doesn't work at all and more importantly, why arent they showing? Below is the full css:

input[type=radio]{
    visibility:hidden;  
    cursor: pointer;
    width: 22px;
    height: 22px;
}

input[type=radio]::before{
    content: "";
    display: inline-block;
    visibility: visible;
    width: 16px;
    height: 16px;
    margin-bottom: 0;
    border: 1px solid #ddd;
    -moz-border-radius:8px;
    border-radius:8px;
    font-size: 41px;
    line-height: 18px;
    padding-left: 1px;
    color: #a3a3a3;
}

2 Answers 2

3

W3:

The :before and :after pseudo-elements

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

In other words, pseudo-elements can only be used on container elements. Thats why it won't work on your input element.

1

Your question is how to debug the pseudo-element in IE, for that I have no answer right now (on a Mac atm). However, I can tell you this:

An input is a self-closing element (<input />), hence it has no actual content. The same goes for images for example. Because of this, there is nothing to add stuff before or after, because those pseudo-elements are inserted (you guessed it) before/after the element's contents.

Long story short: ::before and ::after won't work on self-closing elements.

5
  • Okay! Does it have to be a self-closing element?
    – Himmators
    Sep 25, 2013 at 15:00
  • Yes. Technically you can use <input></input> and most browsers will parse it, but that's not valid HTML and it won't magically make ::before work. Sorry. Sep 25, 2013 at 15:01
  • bummers I'll have to figure something else out!
    – Himmators
    Sep 25, 2013 at 15:05
  • 1
    @KristofferNolgren What you can do is link a label to the input element and hide the input element. You can keep the functionality and style the label element since it's a container element. (if you click on a linked label it will toggle the input field) Sep 25, 2013 at 15:10
  • Oh that's actually a neat solution. Good thinking. Sep 25, 2013 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.