Colored input radio and checkboxes
Colors, plain, fill, no order required. No margin for easier formatting. Download
Colors
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<input id="ad" type="radio" name="a" value="a"/> <label for="ad">Default</label> <input id="ared" type="radio" name="a" value="b" data="red"/> <label for="ared">Red</label> <input id="apink" type="radio" name="a" value="c" data="pink"/> <label for="apink">Pink</label> <input id="apurple" type="radio" name="a" value="d" data="purple"/> <label for="apurple">Purple</label> <input id="ablue" type="radio" name="a" value="e" data="blue"/> <label for="ablue">Blue</label> <input id="agreen" type="radio" name="a" value="f" data="green"/> <label for="agreen">Green</label> <input id="ayellow" type="radio" name="a" value="g" data="yellow"/> <label for="ayellow">Yellow</label> <input id="aorange" type="radio" name="a" value="h" data="orange"/> <label for="aorange">Orange</label>
Plain
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<input id="bd" type="radio" name="b" value="a" data="plain"/> <label for="bd">Default</label> <input id="bred" type="radio" name="b" value="b" data="red plain"/> <label for="bred">Red</label> <input id="bpink" type="radio" name="b" value="c" data="pink plain"/> <label for="bpink">Pink</label> <input id="bpurple" type="radio" name="b" value="d" data="purple plain"/> <label for="bpurple">Purple</label> <input id="bblue" type="radio" name="b" value="e" data="plain blue"/> <label for="bblue">Blue</label> <input id="bgreen" type="radio" name="b" value="f" data="green plain"/> <label for="bgreen">Green</label> <input id="byellow" type="radio" name="b" value="g" data="yellow plain"/> <label for="byellow">Yellow</label> <input id="borange" type="radio" name="b" value="h" data="orange plain"/> <label for="borange">Orange</label>
Fill
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<input id="cd" type="radio" name="c" value="a" data="fill"/> <label for="cd">Default</label> <input id="cred" type="radio" name="c" value="b" data="red fill"/> <label for="cred">Red</label> <input id="cpink" type="radio" name="c" value="c" data="pink fill"/> <label for="cpink">Pink</label> <input id="cpurple" type="radio" name="c" value="d" data="purple fill"/> <label for="cpurple">Purple</label> <input id="cblue" type="radio" name="c" value="e" data="blue fill"/> <label for="cblue">Blue</label> <input id="cgreen" type="radio" name="c" value="f" data="fill green"/> <label for="cgreen">Green</label> <input id="cyellow" type="radio" name="c" value="g" data="yellow fill"/> <label for="cyellow">Yellow</label> <input id="corange" type="radio" name="c" value="h" data="orange fill"/> <label for="corange">Orange</label>
Plain Fill
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<input id="dd" type="radio" name="d" value="a" data="fill plain"/> <label for="dd">Default</label> <input id="dred" type="radio" name="d" value="b" data="red fill plain"/> <label for="dred">Red</label> <input id="dpink" type="radio" name="d" value="c" data="pink fill plain"/> <label for="dpink">Pink</label> <input id="dpurple" type="radio" name="d" value="d" data="purple plain fill"/> <label for="dpurple">Purple</label> <input id="dblue" type="radio" name="d" value="e" data="plain blue fill"/> <label for="dblue">Blue</label> <input id="dgreen" type="radio" name="d" value="f" data="fill green plain"/> <label for="dgreen">Green</label> <input id="dyellow" type="radio" name="d" value="g" data="fill plain yellow"/> <label for="dyellow">Yellow</label> <input id="dorange" type="radio" name="d" value="h" data="plain fill orange"/> <label for="dorange">Orange</label>
Works as well on cheboxes
1 2 3 4 5 6 7 8 9 10
<input id="zd" type="checkbox" name="a"/> <label for="zd">Default</label> <input id="zred" type="checkbox" name="b" data="red"/> <label for="zred">Red</label> <input id="zpink" type="checkbox" name="c" data="pink plain"/> <label for="zpink">Pink plain</label> <input id="zpurple" type="checkbox" name="d" data="purple fill"/> <label for="zpurple">Purple fill</label> <input id="zblue" type="checkbox" name="e" data="blue plain fill"/> <label for="zblue">Blue plain fill</label>