Question

是否有可能，如果是这样，如何更改HTML复选框的背景颜色？我特别在谈论小支票符号背后的白盒子。

我对此进行了相当多的搜索，但尚未找到确凿的答案。

Answer 1

只使用脚本即可实现跨浏览器解决方案see an example here of a styled checkbox...。

正在使用 jQuery UI 来更改样式

Answer 2

我怀疑这是可能的，因为复选框外观无论如何都是特定于操作系统的（我的复选框有带阴影的灰色背景，而不是白色背景）。

解决方案可能是使用JavaScript和一些图形构建您自己的复选框。

Answer 3

仅AFAIK Opera支持表格元素的“背景”CSS语句。

有关详细信息，请查看：http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

Answer 4

杰夫B显示another way为复选框着色。他还提供了一个jsfiddle示例。

这个想法是包装一个跨度并使用带有一些javascript和css的png图像。

Answer 5

我正在实现颜色复选框我认为很容易做颜色复选框但是当我开始实现它时。这是约伯第一次做的时间。下面是COLOR CHECK BOX的HTML和CSS，任何人都可以自定义这个HTML和CSS。

HTML： -

<div class="squaredThree left">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>

CSS： -

.squaredThree {
    width: 20px;    
    position: relative;
}

.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #6d7279;
}

.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 3px solid #0b9dda;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

更改html复选框的背景颜色

5 个答案: