相关疑难解决方法(0)

如何使用CSS设置复选框的样式?

我正在尝试使用以下方式设置复选框的样式:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />
Run Code Online (Sandbox Code Playgroud)

但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式?

html css checkbox

788
推荐指数
21
解决办法
158万
查看次数

复选框的自定义图片?

我想将复选框显示为切换按钮.但我无法使用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)

html css checkbox custom-controls

11
推荐指数
1
解决办法
3万
查看次数

标签 统计

checkbox ×2

css ×2

html ×2

custom-controls ×1