我可以在 CSS 中使用 onclick 效果吗？

Question

我有一个图像元素，我想在单击时更改它。

 <img id="btnLeft">

这有效：

 #btnLeft:hover {
    width: 70px;
    height: 74px;
}

但我需要的是：

 #btnLeft:onclick {
    width: 70px;
    height: 74px;
}

但是，显然，它不起作用。是否有可能在 CSS 中有 onclick 行为（即，不使用 JavaScript）？

原文由 Alegro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最接近的是 :active ：

 #btnLeft:active {
    width: 70px;
    height: 74px;
}

但是，这只会在按住鼠标按钮时应用样式。应用样式 并在点击时保持 应用的唯一方法是使用一些 JavaScript。

原文由 Bojangles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

仅使用 CSS 模拟实际 点击 事件的最佳方法（实际上是唯一方法*）（而不是仅仅悬停在元素上或使元素处于活动状态，在没有 mouseUp 的情况下）是使用复选框 hack。它的工作原理是通过标签的 for="" 属性将 label 附加到 <input type="checkbox"> 元素。

此功能具有 广泛的浏览器支持（ :checked 伪类是 IE9+）。

将相同的值应用于 <input> 的 ID 属性和随附的 <label> 的 for="" 属性，您可以告诉标签重新设置样式单击 :checked 伪类，这要归功于单击标签将选中和取消选中“关联的” <input type="checkbox"> 。

\* 您可以通过 :active 或 :focus IE7+ 中的伪类模拟“选定”事件（例如，对于通常为 50px 的按钮，15-7c02它的宽度而 active : #btnControl:active { width: 75px; } )，但这些不是真正的“点击”事件。它们在元素被选择的整个过程中都是“实时的”（例如通过使用键盘按 Tab 键），这与真正的点击事件有点不同，后者会在 - 通常 - mouseUp 上触发一个动作。

---

复选框黑客的基本演示（你所问的基本代码结构）：

 label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}

 <input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>

在这里，我将标签放置在标记中的输入之后。这样我就可以使用 相邻的兄弟选择器（ + 键）仅选择紧跟在我的 #demo 复选框之后的标签。由于 :checked 伪类适用于复选框， #demo:checked + label 仅在选中复选框时适用。

单击时调整图像大小的演示，这就是您要问的：

 #btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

 <input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

话虽如此，但 还是 有一些坏消息。因为一个标签一次只能 与一个表单控件相关联，这意味着您不能只在 <label></label> 标签内放置一个按钮，然后就此结束。但是，我们 可以 使用一些 CSS 使标签的外观和行为与 HTML 按钮的外观和行为非常接近。

模拟按钮点击效果的演示，超出您的要求：

 #btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

 <input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

此演示中的大部分 CSS 仅用于设置标签元素的样式。如果您实际上不需要 button ，并且任何旧元素都足够，那么您可以删除此演示中的几乎所有样式，类似于我上面的第二个演示。

原文由 TylerH 发布，翻译遵循 CC BY-SA 4.0 许可协议