单选按钮作为图像

Question

尝试找到一个简单的解决方案，将我的单选按钮放在选择页面上，显示为图像而不是基本的圆形图像。

以下是输出每个radio按钮的代码：

foreach ($context['icons'] as $icon)
echo '<input type="radio" name="icon"  value="', $icon['value'], '"', $icon['value'] == $context['icon'] ? ' checked="checked"' : '', ' /><img src="', $icon['url'], '" alt="', $icon['name'], '" title="', $icon['name'], '" />';

当前输出显示单选按钮旁边的每个图像，这不是所需的结果：

正如你所知，这是一个论坛（简单机器），我还没有找到解决方案或体面的帮助。我正在追求易于实现的东西，而且很可能是面向jQuery的。

如果你能提供帮助，我将不胜感激。

Answer 1

检查此shniz

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

我认为它会帮助你

或

HTML 的

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + label
   {
       background: #999;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label
    {
        background: #0080FF;
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }