单选按钮与css的背景图象

时间:2013-12-10 22:48:18

标签: html css

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

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');
}

1 个答案:

答案 0 :(得分: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