CODEWITHSUNDEEP
htmlcssforms
coder
coder

Reputation: 1941

ordered list question

<ol style="float:left;display:inline">
 <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?

Upvotes: 0

Views: 679

Answers (2)

Ben
Ben

Reputation: 57237

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.

Upvotes: 1

anon
anon

Reputation:

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;
}

Upvotes: 1

Related Questions