如何在单击按钮后保留普通样式
如何在单击按钮后保留普通样式
提问于 2019-07-24 16:35:15
下面是我的html和css，它工作得很好。
当前行为是当按钮被按下时，背景颜色是预期的绿色，释放按钮后，背景颜色是黄色。但在这里，我希望背景颜色为蓝色(正常状态)。
我无法移除:焦点，因为键盘选项卡应该按预期工作。
释放鼠标后，我必须使用更多的选择器来将按钮的背景颜色更改为蓝色。
注意：-我不想要Jquery或javascript解决方案，我只期待css的变化。
button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}<button>hello</button>
回答 1
Stack Overflow用户
发布于 2019-07-24 17:09:28
一个想法是考虑一个额外的包装器，它将获得点击而不是按钮。诀窍是使用伪元素在上面创建一个透明层，然后你仍然可以使用键盘获得焦点。
如果按钮上附加了任何单击处理程序，则需要将其移动到span
button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}
span {
display:inline-block;
position:relative;
}
span:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}<span><button>hello</button></span>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57178619
复制相关文章
相似问题
腾讯云开发者
