1

To style inputs of type "checkbox" and "radio" if they are mandatory I created some css information: 

input[type=checkbox].is-mandatory::before {
    position: absolute;
    left: -5px;
    top: -5px;
    border: solid 1px #A94442;
 border-radius: 4px;
    width: 22px;
    height: 22px;
    content: "";
}

input[type=checkbox].is-mandatory::after {
    position: absolute;
    left: -4px;
    top: -4px;
    border: solid 4px #F2DEDE;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    content: "";
}
<div class="checkbox">
    <label>
        <input class="is-mandatory" type="checkbox" id="chk0" name="chk0" value="0">
        A simple checkbox (mandatory)
    </label>
</div>

<div class="radio">
    <label>
        <input class="is-mandatory" type="radio" id="chk1" name="chk1" value="1">
        A radio (mandatory)
    </label>
</div>

Unfortunately it seems only displayed in Chrome and not in FF44 and IE11

styled checkbox and radio in chrome

Is there someting missing in css declaration to get the same view in IE and FF like in Chrome?

Tommy
  • 13
  • 4
  • 1
    Possible duplicate of http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements. Pseudo-elements are not supposed to work on `input` element. – Harry Mar 11 '16 at 10:35

2 Answers2

1

Sorry but Pseudo elements doesn't support on input. Please check the link below but i am not pretty sure that this is gonna help you

http://arthurgouveia.com/prettyCheckable/

KAREN
  • 388
  • 2
  • 10
0

Keep in mind that while an input can't have a :before and :after pseudo-element, the LABEL can. Set your label to have a "for" attribute that's equal to the name/id of your input, and it might help solve some issues.

i7nvd
  • 1,318
  • 2
  • 10
  • 24
  • Thanks a lot. Meanwhile I had solved the problem like you recommended by using a :before and :after with the " – Tommy Mar 11 '16 at 13:31