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



我已经使用 CSS3 设置了一个复选框的样式,并且它正在工作(通过隐藏复选框并在其上放置/设置标签样式(。现在我找到了一些CSS3创建的图标,我想将其用于我的复选框。由于该复选框是使用 CSS3 设置样式的,因此我认为使用带有 CSS3 创建的复选框图标会很简单。

井。。。我以为这很容易,但我这样做没有成功。

CSS3 创建的图标是声音图标。一个带有"声音打开",另一个带有"声音关闭"。现在,我希望在选中复选框时使用"声音打开"图标,在取消选中复选框时使用"声音关闭"。

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

这是我尝试过的:

基本上input:checked + label:before应该有.volume-on:before风格。这奏效了,我在我的按钮div 中看到了"声波"。 不幸的是,我再也看不到图标的其余部分(圆锥体(。

我想要的可能吗?以及如何做到这一点?

亲切问候

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

最新更新