Custom checkbox and radio button not support in all browser - css

Question

I used custom checkbox and radio button for my project using :before and :after, but this work only in "Google Chrome" and not supported in other browsers, Is any trick that's why it should look same in all browser, I don't want to use label after checkbox or radio button.
CSS is here:
FIDDLE ( For example )
My actual radio button looks like this :
Google Chrome:
Firefox:
IE:

Answer 1

Pseudo Elements like :before and :after add content before and after the content of an element. Checkbox and Radio buttons do not have content, so they don't support before and after pseudo elements. Chrome is ' special ' , but the normal behavior is the one from FF and IE.
Furthermore checkbox and radio are browser default elements. They are very hard to change and not supposed to be changed.
Although you said you don't want to add a label, that's the way to go. Add it with position absolute to put it on top of the radiobutton/checkbox like in the example below
body {
padding: 50px;
}
input[type='radio'] {
margin: 0;
height: 13px;
width: 13px;
margin-top: 2px;
position: relative;
}
div.wrapper {
position: relative;
}
input[type='radio'] + label {
content: '';
display: inline-block;
width: 13px;
height: 13px;
border: none;
position: absolute;
left: 0;
top: 1px;
background: gray url("../images/i-radio-empty.png") no-repeat 0 0;
}
input[type='radio']:checked + label {
width: 13px;
height: 13px;
background: red url("../images/i-radio-checked.png") no-repeat 0 0;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male"> Male
<label for="male"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female"> Female
<label for="female"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="other" id="other"> Other
<label for="other"></label>
</div>

Answer 2

Mihai T's solution isn't bad, but not checking checkbox when cliking on text can be really anoying. I personally hate it :)
Though it is true that radio and chekbox does not support pseudo elemens :before and :after but label does. So you can have normal label with text and pseudo element :before with position: absolute.
div.wrapper {
position: relative;
display: inline-block;
margin-right: 10px;
}
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
padding-left: 20px;
}
input[type='radio'] + label:before {
content: '';
width: 13px;
height: 13px;
position: absolute;
left: 0;
top: 1px;
background: #FFF;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
box-sizing: border-box;
}
input[type='radio']:checked + label:before {
background: #000;
border: 4px solid #F9CC55;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male">
<label for="male">Create Tabs Group</label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female">
<label for="female">Update Existing Tabs Group</label>
</div>