Question

我有一个带有9个选项的radiobox选择，我想用图像替换它旁边的按钮和文本。

选项将显示4种颜色的色样范围：

所有
黑色
蓝
巧克力
梅花
绿色
橙
厚朴
伍兹

所以我需要一个选定选项旁边的箭头图像，然后是旁边的颜色范围，如果没有选择该选项我不需要箭头（或者灰色箭头）。

这有多容易？

Answer 1

那里有很多无线电按钮替换库。例如，Lipidity's "FancyForm"（由于CSS的原始功率，遗憾的是现在标记为“过时”）。

Answer 2

你可以这样做：

隐藏单选按钮，将箭头img放在后面，隐藏它
将另一个img（这是文本的替代品）定义为单选按钮的label
使用:checked伪选择器和相邻的兄弟选择器（+），您可以在选中单选按钮时显示箭头img

对于这个解决方案，你不需要Javascript，只需要HTML和CSS（据我记得IE6不会理解使用的选择器，所以你必须回到正常的单选按钮）。

更新：IE6＆lt;将处理+但仅处理IE8＆lt;将处理:checked。我还创建了一个快速测试用例，如果不支持这些属性，它将回退到默认的单选按钮：

<style type="text/css">
    ul,li { margin: 0; padding: 0; list-style: none; }
    .stuffed_radio:enabled { display: none; }
    .stuffed_arrow { display: none; }
    .stuffed_radio:enabled+.stuffed_arrow { visibility: hidden; display: inline-block; }
    .stuffed_radio:checked+.stuffed_arrow { visibility: visible; }
</style>

<ul>
<li>
<input type="radio" id="radio_1" name="baz" class="stuffed_radio" />
<img src="arrow.png" alt="" class="stuffed_arrow" />
<label for="radio_1"><img src="stuff_1.png" alt="" class="stuffed_image" /></label>
</li>
<li>
...
</li>
</ul>

图像而不是单选按钮/文本？

2 个答案: