Question

所以我找到了一个很酷的css3复选框示例http://codepen.io/CreativeJuiz/pen/BiHzp

现在我尝试将此应用于我的HTML，但一切都没有发生。这是我第一次尝试使用样式复选框，我觉得这是一个真正的挑战。

<div class="fb-checkbox">
      <label id="item21_0_label"><input id="item21_0_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" data-hint="" value="Conference" /><span id="item21_0_span" class="fb-fieldlabel">Conference</span></label>
      <label id="item21_1_label"><input id="item21_1_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Incentive campaign" /><span id="item21_1_span" class="fb-fieldlabel">Incentive campaign</span></label>
      <label id="item21_2_label"><input id="item21_2_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Incentive travel" /><span id="item21_2_span" class="fb-fieldlabel">Incentive travel</span></label>
      <label id="item21_3_label"><input id="item21_3_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Awards dinner" /><span id="item21_3_span" class="fb-fieldlabel">Awards dinner</span></label>
      <label id="item21_4_label"><input id="item21_4_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Product launch" /><span id="item21_4_span" class="fb-fieldlabel">Product launch</span></label>
      <label id="item21_5_label"><input id="item21_5_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Hospitality" /><span id="item21_5_span" class="fb-fieldlabel">Hospitality</span></label>
      <label id="item21_6_label"><input id="item21_6_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Comms and marketing" /><span id="item21_6_span" class="fb-fieldlabel">Comms and marketing</span></label>
      <label id="item21_7_label"><input id="item21_7_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Reward &amp; Recoginition scheme" /><span id="item21_7_span" class="fb-fieldlabel">Reward &amp; Recoginition scheme</span></label>
      <label id="item21_8_label"><input id="item21_8_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" value="Design brief" /><span id="item21_8_span" class="fb-fieldlabel">Design brief</span></label>
    </div>

的CSS：

[type="checkbox"]:not(:checked) + label span,
[type="checkbox"]:checked + label span {
position: relative!important;
padding-left: 25px!important;
cursor: pointer!important;
}


[type="checkbox"]:not(:checked) + label span:before,
[type="checkbox"]:checked + label span:before {
content: ''!important;
position: absolute!important;
left: 0!important top: 2px!important;
width: 17px!important; height: 17px!important;
border: 1px solid #aaa!important;
background: #f8f8f8!important;
border-radius: 3px!important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)!important;
}


[type="checkbox"]:not(:checked) + label span:after,
[type="checkbox"]:checked + label span:after {
content: '✔'!important;
position: absolute!important;
bottom: 0!important; left: 4px!important;
font-size: 25px!important;
color: #09ad7e!important;
transition: all .5s!important;
}

[type="checkbox"]:not(:checked) + label span:after {
opacity: 0!important;
transform: scale(0)!important;
}

[type="checkbox"]:checked + label span:after {
opacity: 1!important;
transform: scale(1)!important;
}

[type="checkbox"]:disabled:not(:checked) + label span:before,
[type="checkbox"]:disabled:checked + label span:before {
box-shadow: none!important;
border-color: #bbb!important;
background-color: #ddd!important;
}

[type="checkbox"]:disabled:checked + label span:after {
color: #999!important;
}

[type="checkbox"]:disabled + label span {
  color: #aaa!important;
}

/* accessibility */
[type="checkbox"]:checked:focus + label span:before,
[type="checkbox"]:not(:checked):focus + label span:before {
border: 1px dotted blue!important;
}

在此网站上使用它：http://www.jimharrison.co.uk/

我还尝试按照教程来完成这项工作，虽然它大致有意义但我无法将其应用到我的标记中！：（

Answer 1

加号（“+”）用于定位元素的相邻兄弟，基本上是紧跟某些东西的东西。

在您编写的html中，输入是标签的子项，因此自然地，使用“相邻选择器”的css规则将不适用。

Answer 2

将您的<input> 移到<{1}}元素之外。

<label>中应该有一个for=""属性与输入相关<label>

工作演示：http://jsfiddle.net/verber/DwYNC/11/

CSS3自定义复选框只是没有做任何事情

2 个答案: