Question

我正在使用crossbrowser非图像样式复选框。原始代码来自这里： http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html

我的HTML看起来像这样：

<ul class="imageless-css-3-form-elements" style="list-style-type: none">
    <li><label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
    <li><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
    <li><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
    <li><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
 </ul>

我需要每个复选框都有4个不同颜色的背景。现在，背景颜色对于“公共”类是正确的：background: #78CCBB;

“私人”类应具有此背景颜色：＃A62929
“半p”类应具有此背景颜色：＃FFD996
“分组”类应具有此背景颜色：＃81A2CF

CSS看起来像这样：

.imageless-css-3-form-elements label
        {
            cursor: hand;
            cursor: pointer;
        }

        .imageless-css-3-form-elements label input[type="checkbox"],
        .imageless-css-3-form-elements label input[type="radio"],
        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span,
        .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            vertical-align: middle;
        }

        .imageless-css-3-form-elements label input[type="checkbox"],
        .imageless-css-3-form-elements label input[type="radio"]
        {
            position: absolute;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -webkit-opacity: 0;
            opacity: 0;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span,
        .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            display: inline-block;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span
        {
            font: normal 13px/14px "Segoe UI", Sans-serif;
            font-weight: 900;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span::before
        {
            content: "\2714";
            font-weight: 900;

        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            text-indent: -9999px;
            width: 12px;
            height: 12px;
            font: 12px/12px Garamond, "Segoe UI", Sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            border: solid 1px #0b70cd;
            border-radius: 3px;
            box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/

            background: #78CCBB;/*#0b70cd;*/
            /*background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
            background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
            background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
            background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
            background: linear-gradient(-45deg, #fefefe, #0b70cd);*/
            margin: 0 7px 4px 0;
        }

        .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
        .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
        {
            background: #78CCBB; /*#0b70cd;*/
            /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
            background: linear-gradient(45deg, #fefefe, #0b70cd);*/
            box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
        {
            text-indent: 2px;
            color: #fff;
            text-shadow: 0 0 2px #0b70cd;
            font-weight: 900;
        }

        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            content: "\2022";
            font-size: 22px;
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
            border-radius: 12px;
        }

        .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
        {
            text-indent: 2px;
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
        {
            filter: alpha(opacity=50);
            -moz-opacity: .5;
            -webkit-opacity: .5;
            opacity: .5;
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
        {
            cursor: default;
        }

Answer 1

再添加一些css：

.public_li{background-color:#78CCBB;}
.private_li{ background-color:#A62929}
.semi-p_li{background-color:#78CCBB;}
.grouped_li{ background-color:#A62929}

并将html更改为：

<ul class="imageless-css-3-form-elements" style="list-style-type: none">
    <li class="public_li"> <label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
    <li class="private_li"><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
    <li class="semi-p_li"><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
    <li class="grouped"><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
 </ul>

Answer 2

这有效......

.imageless-css-3-form-elements label
        {
            cursor: hand;
            cursor: pointer;
        }

        .imageless-css-3-form-elements label input[type="checkbox"],
        .imageless-css-3-form-elements label input[type="radio"],
        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span,
        .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            vertical-align: middle;
        }

        .imageless-css-3-form-elements label input[type="checkbox"],
        .imageless-css-3-form-elements label input[type="radio"]
        {
            position: absolute;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -webkit-opacity: 0;
            opacity: 0;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span,
        .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            display: inline-block;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span,
        .imageless-css-3-form-elements label input[type="radio"] + span
        {
            font: normal 13px/14px "Segoe UI", Sans-serif;
            font-weight: 900;
        }

        .imageless-css-3-form-elements label input[type="checkbox"] + span::before
        {
            content: "\2714";
            font-weight: 900;

        }

        .imageless-css-3-form-elements label input[type="checkbox"].public + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            text-indent: -9999px;
            width: 12px;
            height: 12px;
            font: 12px/12px Garamond, "Segoe UI", Sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            border: solid 1px #0b70cd;
            border-radius: 3px;
            box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/

            background: #78CCBB;/*#0b70cd;*/
            margin: 0 7px 4px 0;
        }

.imageless-css-3-form-elements label input[type="checkbox"].private + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            text-indent: -9999px;
            width: 12px;
            height: 12px;
            font: 12px/12px Garamond, "Segoe UI", Sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            border: solid 1px #0b70cd;
            border-radius: 3px;
            box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/

            background:  #A62929;/*#0b70cd;*/
            margin: 0 7px 4px 0;
        }

.imageless-css-3-form-elements label input[type="checkbox"].semi-p + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            text-indent: -9999px;
            width: 12px;
            height: 12px;
            font: 12px/12px Garamond, "Segoe UI", Sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            border: solid 1px #0b70cd;
            border-radius: 3px;
            box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/

            background: #FFD996;/*#0b70cd;*/
            margin: 0 7px 4px 0;
        }

.imageless-css-3-form-elements label input[type="checkbox"].grouped + span::before,
        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            text-indent: -9999px;
            width: 12px;
            height: 12px;
            font: 12px/12px Garamond, "Segoe UI", Sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            border: solid 1px #0b70cd;
            border-radius: 3px;
            box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/

            background: #81A2CF;/*#0b70cd;*/
            margin: 0 7px 4px 0;
        }

        .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
        .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
        {
            background: #78CCBB; /*#0b70cd;*/
            /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
            background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
            background: linear-gradient(45deg, #fefefe, #0b70cd);*/
            box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
        {
            text-indent: 2px;
            color: #fff;
            text-shadow: 0 0 2px #0b70cd;
            font-weight: 900;
        }

        .imageless-css-3-form-elements label input[type="radio"] + span::before
        {
            content: "\2022";
            font-size: 22px;
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
            border-radius: 12px;
        }

        .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
        {
            text-indent: 2px;
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
        {
            filter: alpha(opacity=50);
            -moz-opacity: .5;
            -webkit-opacity: .5;
            opacity: .5;
        }

        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
        .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
        .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
        {
            cursor: default;
}

CSS复选框样式

2 个答案: