ordered list question

<ol style="float:left;display:inline"开发者_JS百科>
 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
     <input type="radio"/>
           </label>
         </li>

 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
       <input type="radio"/>
           </label>
        </li>
</ol>

In this code, I have tried to hide a radio button behind an image (which is specified in div tag). But this doesn't work. I don't want to specify the image directly using the img tag(which works perfectly). Any work around to achieve this?

---

If your goal is to hide the radio button, why don't you just do something like

<input type="radio" class="hidden"/>

input.hidden {
  display: none;
}

---

You need to move the radio button outside of the parent DIV. I think you want something like this:

<ol>
  <li style='position:relative'>
    <input type='radio' style='position:absolute;left:0;top:0;z-index:0' />
    <div style='position:absolute;left:0;top:0;
                z-index:1;background-image:url("someimage.png")'>
      Foo          
    </div>
  </li>
</ol>

Other options are @AgentConundrum's display:none solution (which won't let you click the button, and will collapse the space) or use visibility:hidden (which still won't let you click the button, but will leave the empty space where the button used to be).

If you're trying to replace the appearance of the radio button, there are a lot of quick solutions to this but they use Javascript.

While I'm talking about Javascript, you can also not have a radio button and just click on your div, which can be coded to act as a radio button.

In general, it's probably not good design to hide form elements that do something, since you'll have to work around the interaction with them anyway every time you want to use them. Just omit them completely and use Javascript, or evolve your design to incorporate them.