让 button 在获得focus前 是蓝色, 获得focus后是绿色
时间: 2023-03-30 19:03:30 浏览: 34
可以使用 CSS 的:focus 伪类来实现这个效果,代码如下:
button {
background-color: blue;
}
button:focus {
background-color: green;
}
相关问题
在bootstrap中如何让 button 在获得focus前 是灰色, 获得focus后是蓝色
您可以使用以下CSS代码来实现这个效果:
.btn:focus, .btn:active:focus, .btn.active:focus {
background-color: #337ab7;
border-color: #2e6da4;
color: #fff;
}
.btn {
background-color: #ccc;
border-color: #ccc;
color: #333;
}
这样,当按钮获得焦点时,它将变为蓝色,而在获得焦点之前,它将是灰色的。
button is-focus-visible
根据提供的引用内容,可以得知:focus-visible伪类可以判断是由键盘还是鼠标触发的聚焦行为。因此,如果想要让button元素在键盘聚焦时有不同的样式,可以使用:focus-visible伪类来实现。
以下是一个示例代码,当button元素通过键盘Tab触发聚焦时,会添加一个蓝色的边框样式:
```css
button:focus-visible {
outline: 2px solid blue;
}
```