E:focus

语法

  • E:focus { sRules }

说明

设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

  • webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

兼容性

IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-7.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE8.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>



<style>
h1 {
    font-size: 16px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:focus {
    background: #f6f6f6;
    color: #f60;
    border: 1px solid #f60;
    outline: none;
}
</style>
</head>
<body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
    <ul>
        <li><input value="姓名"></li>
        <li><input value="单位"></li>
        <li><input value="年龄"></li>
        <li><input value="职业"></li>
    </ul>
</form>
</body>
</html>