2

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

嗯......我认为这很容易,但我没有成功。

CSS3 创建的图标是声音图标。一种是“声音开启”,一种是“声音关闭”。现在我希望在选中复选框时使用“声音开启”图标,而在未选中复选框时使用“声音关闭”。

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

这是我尝试过的:

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

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

亲切的问候,

4

1 回答 1

0

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

于 2012-05-10T17:22:32.923 回答