html - 带CSS的灯泡按钮

我正在尝试创建灯泡按钮，并得到以下解决方案，一些类似于我的需要，但它的CSS是非常复杂的，它也需要复杂的javascript。难道没有办法创造一个像W: 50px, H:50px这样的小尺寸灯泡按钮吗。点击时得到on，点击时关闭（切换）。难道我们不能简单地在字形图标或可怕的字体图标上做吗？
http://cssdeck.com/labs/light-bulb

最佳答案

看看我给你做的例子。
想到的第一个有自己可切换状态的元素是一个复选框。您可以使用其:checked伪选择器根据复选框的状态更改样式。
由于您无法将背景图像添加到复选框本身，因此我使用了label元素，该元素将在单击时切换复选框的状态。为了根据复选框的状态改变标签的样式，我使用this（+）为复选框后面的单个标签创建规则。
编辑：我更新了这个例子来修复Chrome对图片的MIME类型的抱怨。
E2:虽然这超出了您的问题范围，但是如果您希望在单击时运行一些JavaScript，可以执行类似的操作：

bulb.onclick = function(ev) {
    if (this.checked) {
        console.log('the lightbulb is now on');
    } else {
        console.log('the lightbulb is now off');
    }
};

演示adjacent selector。
E3：正如评论中提到的，预先加载“on”图像可能是个好主意。
您可以使用数据URIhere[1]将图像“嵌入”到CSS中，比如[2]。不过，这种方法可能会慢一些。
你可以使用一个图像精灵来保存你需要的所有图标，点击后，改变background-position，比如this。
E4:this是一种不用复选框就可以完成灯泡切换的方法。
E5:Here是使用FontAwesome的一个例子。然而，FontAwesome没有包含一个点亮灯泡的图标，所以我只是改变了文本的颜色（看起来不太好看）。使用JavaScript，我更改了元素的color对象的style属性。您可以切换CSS类或将其与复选框示例相结合。
E6:Here是将FontAwesome与复选框示例结合使用的示例。
E7:Here是一个有趣的例子，它利用CSS3转换来缓解这两个colors之间的矛盾。