Checkbox with custom image

Question

Based on my last question Radio button with custom image,

requesting a solution for custom checkboxes using :before

Solution accepted from @Tambo is as follows. Need customization to be used with checkboxes on the same solution pattern (smart and concise). Thanks.

CSS

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

HTML

<input type=radio name=radio />
<input type=radio name=radio />
<input type=radio name=radio />

We are NOT a code-factory. We gave you a hint - so pls do the stuff yourself! — Fuzzyma, Jan 16 '15 at 19:49
the purpose is to give one stop solution to people who are looking to customize the both, believe me there's so much crappy information on the web, all jquery, js plugins etc. those top 10 jQuery form plugins etc. gone through all, both of these answers are clean and an elegant solution to this and will help searchers a lot. — user2727195, Jan 16 '15 at 20:06

score 0 · Answer 1 · edited Jan 16 '15 at 19:59

try this

[type=checkbox]{
    position: relative;
    margin: 40px
}

[type=checkbox]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=checkbox]:checked:before{
    background: green
}

<input type=checkbox name=radio />
<input type=checkbox name=radio />
<input type=checkbox name=radio />

Checkbox with custom image

1 Answers1

Linked