使用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']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" 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 } ?>
这一切都很好并且有效。但我想知道的是,我看到他们已经将输入包装在Label类中。因为这是一个图像选择,我可以有一个50px的小颜色图像,以选择一个选项,你可以点击图像本身,而不是点击单选按钮来选择它。
我想知道的是,使用jsfiddle我做了http://jsfiddle.net/8fqqrstq/我想用
删除单选按钮本身 input[type="radio"] { visability: hidden; }
但人们仍然会点击图片来选择该选项。但是,选择该选项后,a:已检查的css用于更改图像的边框以表示
border: solid 1px #ff0000
我将如何做到这一点?
答案 0 :(得分:2)
我没有足够的声誉来发表评论,但我遇到了同样的问题,想发布一个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; }