苏飞论坛

标题: 【零基础学习web前端】CSS-伪类（:focus、:first-child、:link、:visited） [打印本页]
作者: Amy    时间: 2018-12-7 16:08
标题: 【零基础学习web前端】CSS-伪类（:focus、:first-child、:link、:visited）
【零基础学习web前端】CSS-伪类（:focus、:first-child、:link、:visited）


【零基础学习web前端】教程目录导航
http://www.sufeinet.com/thread-24027-1-1.html



:focus
当我们需要让点击之后的元素一直拥有某些样式，这时用:active就不行了，因为松开鼠标样式会消失。:focus可以用在<input>标签上。
[CSS] 纯文本查看 复制代码
input{

    width: 200px;

    height: 30px;

    border: 1px solid #999;

    border-radius: 3px;

    outline:none;

}

input:focus{

    border: 2px solid red;

}


[HTML] 纯文本查看 复制代码
<div>

        <span>姓名</span>

        <input type="text">

    </div>

点击前和点击后的效果：
(, 下载次数: 78)