CSS :focus 选择器

实例

选择获得焦点的输入字段，并设置其样式：

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>
<p>在文本字段内单击可看到黄色背景:</p>
<form>
  姓氏: <input type="text" name="firstname"><br>
  名字: <input type="text" name="lastname">
</form>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

选择器
:focus	4.0	8.0	2.0	3.1	9.6

注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。

定义和用法

:focus 选择器用于选取获得焦点的元素。

提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

更多实例

当 <input type="text"> 获得焦点时，逐渐将宽度从 100px 更改为 250px ：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h2>width 属性</h2>
<p>将输入字段的宽度设置为 100px。但是，当输入字段获得焦点时，将其设置为 250px ：</p>
Search: <input type="text" name="search">
</body>
</html>

运行一下

CSS :focus 选择器

实例

浏览器支持

定义和用法

更多实例

相关页面

分类导航