我正在尝试使用以下方式设置复选框的样式:
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />Run Code Online (Sandbox Code Playgroud)
但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式?
我想将复选框显示为切换按钮.但我无法使用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");
}
Run Code Online (Sandbox Code Playgroud)
我的HTML:
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
</body>
Run Code Online (Sandbox Code Playgroud)