html图片选择框,html – 复选框的自定义图片？

我想显示复选框作为切换按钮.但是我不能使用CCS将自定义图片应用到它 – 然后复选框被绘制.如何适应这项任务？

我的CSS：

input[type=checkbox]#settingsbutton {

border-style: none;

background-color: transparent;

width: 42px;

height: 40px;

display: block;

}

input[type=checkbox].button-settings {

background-image: url("images/button-settings-normal.png");

}

input[type=checkbox].button-settings:active {

background-image: url("images/button-settings-normal.png");

}

input[type=checkbox].button-settings:hover {

background-image: url("images/button-settings-hover.png");

}

input[type=checkbox].button-settings:active {

background-image: url("images/button-settings-pressed.png");

}

我的HTML：