更改按钮单击背景，仅使用CSS？

  • Z时代
  • 2024-01-10
  • 分类：问答

点击时可以更改背景颜色吗button？全部document，仅使用CSS和HTML5？

回答：

基于我在评论中发布的小提琴，我对它进行了少许修改，以使用Bootstrap按钮CSS。

只需包含Bootstrap的CSS文件，然后使用以下代码即可。

HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

这将使用相邻的兄弟选择器。

它在这里起作用：（我已经添加*-user-select:none;了防止选择标签文本的标签，但是标签不是必需的）

浏览器支持

Chrome，Firefox [Desktop＆Mobile]（Gecko）≥1.0，InternetExplorer≥7，Opera≥9和Safari≥3参考：属性选择器和相邻的同级选择器

以上是 更改按钮单击背景，仅使用CSS？ 的全部内容， 来源链接： utcz.com/qa/414275.html

回到顶部