单选带图像但隐藏单选按钮并使用图像选择

Posted 2023-03-05

【中文标题】单选带图像但隐藏单选按钮并使用图像选择

【英文标题】：Radio Select with Image but Hide Radio Button and use image to select

【发布时间】：2014-12-08 04:29:54

【问题描述】：

使用 opencart 2.0.0 版

在 Product.tpl 页面内有一个包含此内容的 foreach 选项循环

        <?php if ($option['type'] == 'image')  ?>
          <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
            <label class="control-label"><?php echo $option['name']; ?></label>
            <div id="input-option<?php echo $option['product_option_id']; ?>">
              <?php foreach ($option['product_option_value'] as $option_value)  ?>
              <div class="radio">
                <label>
                  <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                  <img src="<?php echo $option_value['image']; ?>"  class="img-thumbnail" /> <?php echo $option_value['name']; ?>
                  <?php if ($option_value['price'])  ?>
                  (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                  <?php  ?>
                </label>
              </div>
              <?php  ?>
            </div>
          </div>
        <?php  ?>

这一切都很好并且工作正常。但我想知道的是，我看到他们已经将 Input 包装在 Label 类中。因为这是一个图像选择，我可以有一个 50 像素的小图像来选择一个选项，您可以单击图像本身而不是单击单选按钮来选择它。

我想知道的是，使用我制作的 jsfiddle http://jsfiddle.net/8fqqrstq/ 我想删除单选按钮本身使用

input[type="radio"] visability: hidden;

但人们仍然单击图像来选择该选项。但是！，选择选项，答：checked CSS用于更改图像的边框来说出

border: solid 1px #ff0000

我该怎么做呢？

【问题讨论】：

继续阅读相邻的兄弟组合子。

我知道相邻的兄弟组合器，通常你会有 input:checked + label .... 等....但这不是相邻的，标签被包裹在输入周围.

那又怎样？您想要格式化 img，而那些 是 输入元素的相邻兄弟。

向你致敬，先生，它正盯着我的脸！输入[type="radio"]:checked + img 边框:solid 1px #ff0000;

【参考方案1】：

我没有足够的声誉来发表评论，但我遇到了同样的问题并想发布一个 jsfiddle 链接以显示您正在尝试做什么，以防其他人对此感到有些困惑！

唯一改变的是我删除了每个选项旁边的文本，并为每个单选按钮指定了相同的名称，以便只能选择一个！我也用过

display:none;

而不是

visibility: hidden;

用于单选按钮，以免占用额外空间。

这是显示如何使用图像作为选项而不显示单选按钮的 CSS。

div.radio img  border: solid 1px #bbb; padding: 2px; 
div.radio label  font-family: arial; 
input[type=radio] display: none; 
input[type=radio]:checked + img  border: solid 1px #ff0000;