CSS issue regarding radiobuttons

Question

I have HTML, which I cannnot change and I need to apply CSS styling for input elements inside it (type:radio). But I cannot do this. Already spent hours trying to make it work. Is it even possible?

Here is an example of what I want to implement:

http://jsfiddle.net/Raimondss/pKdr4/26/

.radio {
  position: relative;
  float: left;
  clear: left;
  display: block;
  padding-left: 40px;
  margin-bottom: 12px;
  line-height: 22px;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}

One of the <input> elements is inside <span> element, and because of that it is not working like other buttons. I have a requirement to put all my <input> elements inside this <span> elements, but then it just stop working for me. Does anyone have any suggestions regarding how this can be done and how should I change my CSS? How can I put <input> elements inside <span> tags and still have working functionality?

PS <input> element can also have class.

Answer 1

This line

input[type="radio"]:checked + label:before

Means any <label> that is adjacent to a input[type="radio"]:checked . The first one isn't adjacent because of the span.

If you put them all in spans it doesn't work, for that same reason.

Option 1

If you can use javascript you can mark the span of the selected radio and use something like

span.checked-in-me + label:before

Option 2

If putting the label in the span together with the input is an option - that can help.