Question

所以我试图用背景图像设置我的光谱按钮，因此整个单选按钮只是一个图像。按下按钮后，我想更改背景图像的网址。这可能吗？

HTML

   <form method="POST" action="scripts/rate.php">
            <label for="star" class="star">
            <input type="radio" name="rating" value="star1">
        </form>

CSS

  input.star
{
    width:32px;
    height:32px;
}

label.star
{
    width:32px;
    height:32px;
    background-image: url('star-grey.png');
}

Answer 1

这就是你需要的：

<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>

通过css隐藏你的单选按钮：

.radios input[type=radio]{
    display:none
}

根据需要设计标签样式。我创建了一个简单的jsfiddle，它完全演示了如何在没有默认外观的情况下使用单选按钮。相反，它是一个有点彩色的正方形，在检查时会发生变化。

以下是jsfiddle

单选按钮与css的背景图象

1 个答案: