CSS複選框樣式

我正在使用crossbrowser非圖像樣式複選框。原來的代碼是從這裏： http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html CSS複選框樣式

我的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; 
     }

來源

2012-05-25 Livi17

這工作...

.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-25 19:27:54 Livi17

只需添加一些更多的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-25 03:57:30 user1270235

沒有，這就是我需要的不是什麼。我只需要複選框的背景具有不同的顏色。該解決方案爲整個列表項目提供背景。我確信此規則需要重複對每種顏色的： '.imageless-CSS -3-形式元素標籤輸入[類型=「複選框」] +跨距:: before' 。 ..但我不知道如何瞄準班級的路徑。 – Livi17

CSS複選框樣式

回答

相關問題