Question

我试图为我的网站设计这3个单选按钮的样式，很简单，除了我需要它们看起来不同。例如，一个有paypal，另一个是alertpay和另一个check，每个都有不同的图像。这是非常艰难的，因为我正在尝试许多不同的教程，所有教程都告诉我如何将其改为一个，但后来无法为其他教程。

这是我要遵循的教程之一 - 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
});

顺便说一下，＆＃39; screwDefaultButtons＆＃39; link不是教程，而是使用该jQuery插件进行自定义按钮。

每个单选按钮的风格不同

2 个答案: