提问者:小点点

点击按钮后如何保持正常样式


下面是我的html和css,它的工作非常好

当前行为是按下按钮时,背景颜色为预期的绿色,释放按钮后,背景颜色为黄色。但这里我希望背景颜色是蓝色(正常状态)。

我不能删除:焦点,因为在键盘选项卡,应该按预期工作。

还有什么选择器,我必须使用更改按钮的背景颜色为蓝色后,释放鼠标…

注意:-我不想要Jquery或javascript解决方案,我只期望css更改。

null

button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}
<button>hello</button>

null


共1个答案

匿名用户

一个想法是考虑一个额外的包装器,它将获得单击而不是按钮。诀窍是创建一个透明层上面使用伪元素,你仍然可以有焦点使用键盘。

如果按钮附加了任何单击处理程序,则需要将其移动为span

null

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>