logo标签列表

CSS3自定义复选框无法正常工作

htmlformscsscheckbox
3
我发现一个很酷的CSS3复选框示例，链接为http://codepen.io/CreativeJuiz/pen/BiHzp。现在我试图将它应用到我的HTML上，但是没有任何反应。这是我第一次尝试样式化复选框，我觉得这是一个真正的挑战。这里是JSFIDDLE链接。
<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/

我也尝试过跟随教程来让它能够工作，虽然大致明白，但我仍然无法将其应用到我的标记中！:(

2个回答
2

加号（“+”）用于定位元素的相邻兄弟，也就是说，紧跟在某个元素后面的东西。

在你编写的 html 中，输入框是标签的子元素，因此自然而然地，“相邻选择器”所使用的 css 规则不会应用。

为标签和span添加了加号，但仍然没有任何运气。我尝试了许多不同的应用CSS的方法，包括其他教程，然后尝试确保我的选择器是正确的，但从未有过任何有效的结果。真是太烦人了！ - lejimmie
再次查看您链接的CodePen示例中的html。复选框输入项位于标签之前。这就是为什么 [type="checkbox"]:checked + label 起作用的原因。该行css基本上是这样读取的：如果有一个复选框且被选中，则将这些样式应用于它后面的第一个<label>。我不是指“在其后显示”，而是指“在代码中实际书写在其后”。 - Frankenscarf
哦，我明白了 - 起初我无法弄清楚我缺少什么，因为我认为我所做的事情只适用于所有复选框和标签，但它实际上就像一道难题 - 只需确保一切都按正确顺序排列。谢谢，这也很有教育意义！ - lejimmie
1
太好了。我需要的只是有人填补我对此的理解上的空白，而你做到了！非常感激，谢谢。现在只需要进行一些微小的调整，就可以将其定位到我想要的位置 :) - lejimmie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接