Question

考虑我的HTML

<label for="checkbox"><input id="checkbox" type="checkbox"/></label>
<div class="magic_button">
    <span>Click!</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

和我的CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,body {
    font-family:'Open Sans', sans-serif;
    height:100%;
}
#checkbox, p {
    display:none;
}
.magic_button {
    background:#27ae60;
    padding:6px 10px;
    width:20%;
    margin:0 auto;
    text-align:center;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    position:absolute;
    top:calc(50% - 17px);
    left:0;
    right:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
}
#checkbox:checked + .magic_button {
    background:#e74c3c;
    left:0;right:0;
    top:0;bottom:0;
    width:100%;
    transition:width 2s;
    -webkit-transition:width 2s;
    -moz-transition:width 2s;
}

我一直在关注教程，我不能为我的生活解释为什么我的代码不起作用。我知道我当然可以使用java脚本，但我正在尝试复选框技巧。我想要一个垂直和水平居中的按钮，当点击时，它需要转换宽度，它需要扩展和更改颜色。有谁知道我怎么能让这个工作？我还希望按钮文本消失，然后转到段落文本，如果可能的话。如果没有，请随意给我一些javascript，如果它不是可以消失的。

Answer 1

您需要将label元素放在.magic_button元素中。绝对定位它以填充整个按钮，允许您单击它，从而切换复选框。

label {
    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
}

这应该照顾主要问题。如果希望在单击按钮后隐藏按钮文本，则需要使用:checked伪类将其定位，并将显示设置为none。该段也是如此。

这样的事情会起作用：

#checkbox,
#checkbox:checked + .magic_button span,
.magic_button p {
    display:none;
}
#checkbox:checked + .magic_button p {
    display:block;
}

Example Here

您的代码首先没有工作的原因是因为标记。

<label for="checkbox"><input id="checkbox" type="checkbox"/></label>
<div class="magic_button">...</div>

选择器#checkbox:checked + .magic_button将选择.magic_button元素，该元素是已检查元素的相邻后续兄弟元素。由于复选框是label元素的子元素，因此它不起作用。使input / .magic_button元素与兄弟姐妹相邻，允许选择元素。

作为绝对定位label元素的替代方法，您也可以将其包裹在像this这样的.magic_button元素周围。当然，这意味着你也必须改变一些选择器。

CSS：Checkbox输入技巧不起作用

1 个答案: