クロスブラウザの非画像スタイルのチェックボックスを使用しています。元のコードはここからです：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
「semi-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;
}