每个单选按钮的样式不同

Question

我正在尝试为我的网站设计这3个单选按钮，非常简单，除非我需要它们全部看上去不同。 例如，一个选项有贝宝，另一种alertpay和另一种支票，每个选项都有不同的图像。 事实证明，这很困难，因为我正在尝试许多不同的教程，所有教程都向我展示了如何仅对其中一个进行更改，而对其他则无法更改。

这是我要遵循的教程之一-http: //screwdefaultbuttons.com/

任何人都可以给我任何想法或链接到可以帮助我的地方。 谢谢

Answer 1

是的，以一些精美的格式在CSS中定义您的类，例如：

.button1 { 
   width: 19px;
   height: 25px;
   padding: 0 5px 0 0;
   background: url(checkbox.jpg) no-repeat;
}

.button2 {
   width: 19px;
   height: 25px;
   padding: 0 5px 0 0;
   background: url(somethingelse.jpg) no-repeat;
}

然后将类放在html中，例如：

<input type="radio" name="radio1" class="button1" />

Answer 2

您应该分别调用screwDefaultButtons在每个上设置不同的图像，例如

$('#radio1').screwDefaultButtons({ 
         checked: "url(images/radio_Checked1.jpg)",
         unchecked: "url(images/radio_Unchecked1.jpg)",
         width:    85,
         height:   85
});

$('#radio2').screwDefaultButtons({
         checked: "url(images/radio_Checked2.jpg)",
         unchecked: "url(images/radio_Unchecked2.jpg)",
         width:    85,
         height:   85
});

顺便说一句，“ screwDefaultButtons”链接不是教程，而是针对自定义按钮使用该jQuery插件的。