hi,欢迎访问本站!
当前位置: 首页Web前端正文

css点击效果样式

墨初 Web前端 598阅读

想在利用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伪类元素选择器,大家可以了解一下。

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐