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