我有一个用于付款示例的复选框列表
<input type='checkbox' name='methods' value='valuable' id="Paypal"/><label id="PaypalL" for="Paypal"></label>
<input type='checkbox' name='methods' value='valuable' id="MasterCard"/><label id="MasterCardL" for="MasterCard"></label>
<input type='checkbox' name='methods' value='valuable' id="Visa"/><label id="VisaL" for="Visa"></label>
我想用一对自定义的开/关图像替换复选框图像,我想知道是否有人对如何使用CSS更好地了解?
每个图像复选框将需要以更少的代码方式存在一组不同的图像对
input[type=checkbox] {
display:none;
}
input[type=checkbox] + #PaypalL
{
background: url('PayPalOff.png') 0 0px no-repeat;
height: 40px;
width: 64px;
display:block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + #PaypalL
{
background: url('PayPalOn.png') 0 0px no-repeat;
height: 40px;
width: 64px;
padding: 0 0 0 0px;
}
#MasterCard + #MasterCardL
{
background: url('MasterCardOff.png') 0 0px no-repeat;
height: 40px;
width: 64px;
display:block;
padding: 0 0 0 0px;
}
#MasterCard:checked + #MasterCardL
{
background: url('MasterCardOn.png') 0 0px no-repeat;
height: 40px;
width: 64px;
padding: 0 0 0 0px;
}
#Visa + #VisaL
{
background: url('VisaOff.png') 0 0px no-repeat;
height: 40px;
width: 64px;
display:block;
padding: 0 0 0 0px;
}
#Visa:checked + #VisaL
{
background: url('VisaOn.png') 0 0px no-repeat;
height: 40px;
width: 64px;
padding: 0 0 0 0px;
}
这是我到目前为止提出的
最佳答案
您的方法是目前最清洁的方法。没有JS,它也适用于较旧的浏览器,那么到底是什么问题呢?我唯一要做的就是精简整个CSS,因为目前CSS并没有真正使用C -级联,也就是将不同的卡片图像合并为一个精灵。像这样:
input[type=checkbox]{ display:none; }
input[type=checkbox] + label{
background-image: url('cards.png');
display: block;
height: 40px;
padding: 0;
width: 64px; }
#Paypal + #PaypalL{ background-position: 0 0; }
#Paypal:checked + #PaypalL{ background-position: 0 -40px; }
#MasterCard + #MasterCardL{ background-position: 0 -80px; }
#MasterCard:checked + #MasterCardL{ background-position: 0 -120px; }
#Visa + #VisaL{ background-position: 0 -160px; }
#Visa:checked + #VisaL{ background-position: 0 -200px; }
在上面的示例中,子画面将卡片图像一个个堆叠在另一个之上,每个卡片的高度为40px,因此背景位置偏移。
否则,您的代码将是可靠的,这是我个人将要执行的工作,而不是其他任何复选框替换解决方案。
关于html - 纯CSS复选框图像替换多对,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21659056/