HTML中的按钮经常被用来触发各种功能,但是当用户点击按钮后,按钮的样式会回到默认状态。为了提高用户的交互体验,我们可以使用CSS来保持按钮点击状态。
在CSS中,我们可以使用:active伪类来表示按钮被点击的状态。该伪类会在用户点击按钮后立即生效,并保持按钮样式直到用户松开鼠标。使用:active伪类,我们可以轻松地实现点击按钮时的反馈效果。
例如,我们可以通过以下CSS代码来定义一个简单的按钮样式:
pre {
display: block;
background-color: #369;
color: #fff;
padding: 10px;
border-radius: 5px;
}
按钮被点击时,我们可以利用:active伪类来改变按钮样式,例如:
pre:active {
background-color: #316ba7;
}
这将使按钮在被点击时变成深蓝色。但是,当用户松开鼠标时,按钮样式将回到默认状态。为了保持按钮点击状态,我们需要使用其他伪类。
我们可以使用:checked伪类来表示按钮的选中状态,并将按钮的类型设置为复选框或单选按钮。例如:我们可以使用:checked伪类对选中的按钮应用样式,来模拟按钮的点击状态。例如:
pre:checked+label {
background-color: #316ba7;
}
这将使复选框或单选按钮选中时,它所对应的标签(在本例中为