1

我正在使用跨浏览器非图像样式复选框。原始代码来自这里： 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;

“private”类应该有这个背景色：#A62929
“semi-p”类应该有这个背景色：#FFD996
“grouped”类应该有这个背景色：#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;
        }
4

2 回答 2

0

这有效...

.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;
}
于 2012-05-25T19:27:54.590 回答
0

只需添加一些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>
于 2012-05-25T03:57:30.563 回答