Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shahab KhanShahab Khan 

How to display radio buttons with image

Hi,

Can some one help me how to display radio button with image as shown below.

User-added image

Thanks in advance.
robdobbyrobdobby
Hi!  Something like this will do it in HTML:

<style>
ul {
    list-style-type:none;
}
table {
    border-collapse:collapse;
}
td {
    vertical-align: middle;
}
</style>


<ul>
<li>
  <input type="radio" name="debitcredit" value="debit">Debit</input>
  </li>
<li>
  <table>
  <tr>
   <td><input type="radio" name="debitcredit" value="credit"></td>
   <td>Credit&nbsp;&nbsp;&nbsp;</td>
   <td><img src="http://www.credit-card-logos.com/images/multiple_credit-card-logos-1/credit_card_logos_10.gif" /></input></td>
   </tr>
  </table>
</li>
</ul>