css点击效果样式

想在利用css样式代码实现某个元素被鼠标点击后的样式变化，可以使用:focus伪类选择器。下面是具体的使用方法，大家可以参考一下。

css样式点击后效果变化

:focus：此选择器用于选择具有焦点的元素，当元素获取焦点时被触发。

例1：

下面示例代码中，button被鼠标点击后边框的颜色会变成红包。

<style>
    .btn:focus {
        border: 2px solid red;
    }
</style>
<button class="btn">我是一个按钮</button>

例2：

下面示例代码中，当input元素获取焦点(被鼠标点击)后边框会变成红色。

<style>
    input:focus {
        border: 2px solid red;
    }
</style>
<input type="text" name="" id="">

以上就是利用css代码来实现某个元素被点击后样式发生变化的方法，这里用到了css样式代码中的:focus伪类元素选择器，大家可以了解一下。