使用CSS3为复选框标签设置样式

时间:2012-05-10 16:54:35

标签: css css3 label stylesheet

我使用CSS3设置了一个复选框,这是有效的(通过隐藏复选框并在其上放置/样式化标签)。现在我发现了一些CSS3创建的图标,我想用它来复选框。由于复选框是使用CSS3设置的,因此我可以很容易地使用CSS3为复选框创建图标。

嗯......我觉得这很容易,但我没有成功。

CSS3创建的图标是声音图标。一个有“声音开”,一个有“声音关闭”。现在我希望在选中复选框时使用“声音开启”图标,并在取消选中时“关闭声音”。

请看我的小提琴:http://jsfiddle.net/mauricederegt/TRtvx/

这就是我尝试过的:

基本上input:checked + label:before应该具有.volume-on:before样式。这很有效,我在按钮div中看到了“声波”。不幸的是,我再也看不到图标的其余部分了(锥形)。

我想要的甚至可能吗?以及如何实现这一目标?

亲切的问候,

1 个答案:

答案 0 :(得分:0)

您可以使用CSS Sprites来实现这一点 - 基本上您将显示单个图像的不同部分,充当两个图像。看看这个很棒的教程:http://css-tricks.com/css-sprites/