css - 让我的 CSS 转换工作的问题

Question

编辑:我刚刚将 CSS 应用到我的网站，它确实有效。显然它在编辑器中，但事实并非如此。不确定是怎么回事，但它似乎在编辑器之外运行良好。

我正在尝试根据此处的样式创建自定义复选框:http://codepen.io/CreativeJuiz/pen/BiHzp

我正在尝试让复选框背景在选中时进行转换。但是我无法让过渡工作，它只是在选中时立即捕捉到下一种颜色。

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

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

/* checkbox aspect */
[type="checkbox"] + label:before{
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 17px; height: 17px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
  transition-duration: 0.5s;
  transition-property: all;
}

/* Checked Transition */
[type="checkbox"]:checked + label:before {
    background-color: #1ba8c4;
}

我在这里做错了什么？

Answer 1

也为选中的元素添加过渡。

[type="checkbox"]:checked + label:before {
    background-color: #1ba8c4;
    transition-duration: 0.5s;
    transition-property: all;
}

它应该有效。 :)