html - Styling the radio buttons -

i want style checkboxes. able using following html markup , css.

however problem have bit different html markup, cannot change. reason not being able change is generated plugin, need edit core files change that, not want do.

so how can add same style html have below.

working html:

<input type="radio" id="radio"> <label for="radio"></label> 

required html:

<li>     <input id="option-11" type="radio" value="11">     <label for="option-11">option one</label> </li> 

as can see although markup similar, in above label used display text.

css:

input[type="radio"], input[type="checkbox"] {     display: none; }  input[type="radio"] + label{     background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');     padding:0;     display: inline-block;     width:20px;     height:20px; }  input[type="radio"]:checked + label {     background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); } 

demo: http://jsfiddle.net/jpslm/

it works code, don't know problem is.

http://jsfiddle.net/sgqsl/

html

<li>     <input type="radio" id="radio" name="radiogroup"/>     <label for="radio"></label> </li> 

and css

input[type="radio"], input[type="checkbox"] {     display: none; }  input[type="radio"] + label{     background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');     padding:0;     display: inline-block;     width:20px;     height:20px; }  input[type="radio"]:checked + label {     background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); }  li {     list-style-type: none; }