CSS Focus伪类|极客教程

CSS Focus伪类

在网页开发中，CSS的:focus伪类用于设置元素在获得焦点时的样式。当用户点击或通过键盘导航到一个可聚焦的元素时，该元素就会获得焦点。通过使用:focus伪类，我们可以为这些元素定义特定的样式，以提高用户体验和可访问性。

基本用法

:focus伪类可以应用于任何可以获得焦点的元素，比如链接、按钮、输入框等。下面是一个简单的示例，当输入框获得焦点时，边框颜色会改变：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input:focus {
    border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当输入框获得焦点时，边框颜色会变成红色。这样用户就可以清楚地知道他们正在与哪个元素交互。

改变背景颜色

除了改变边框颜色，我们还可以通过:focus伪类来改变元素的背景颜色。下面是一个示例，当按钮获得焦点时，背景颜色会变成蓝色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    background-color: blue;
    color: white;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当按钮获得焦点时，背景颜色会变成蓝色，文字颜色会变成白色。这样用户就可以清楚地知道他们正在与哪个按钮交互。

改变文本样式

除了改变背景颜色，我们还可以通过:focus伪类来改变元素的文本样式。下面是一个示例，当链接获得焦点时，文本颜色会变成绿色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
a:focus {
    color: green;
}
</style>
</head>
<body>
<a href="#">Click Me</a>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当链接获得焦点时，文本颜色会变成绿色。这样用户就可以清楚地知道他们正在与哪个链接交互。

改变字体大小

除了改变文本颜色，我们还可以通过:focus伪类来改变元素的字体大小。下面是一个示例，当段落获得焦点时，字体大小会变成20px：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
p:focus {
    font-size: 20px;
}
</style>
</head>
<body>
<p>Geek-docs.com</p>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当段落获得焦点时，字体大小会变成20px。这样用户就可以清楚地知道他们正在与哪个段落交互。

改变边框样式

除了改变背景颜色和文本样式，我们还可以通过:focus伪类来改变元素的边框样式。下面是一个示例，当复选框获得焦点时，边框样式会变成虚线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input[type="checkbox"]:focus {
    border: 2px dashed orange;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当复选框获得焦点时，边框样式会变成虚线。这样用户就可以清楚地知道他们正在与哪个复选框交互。

改变元素位置

除了改变样式，我们还可以通过:focus伪类来改变元素的位置。下面是一个示例，当图片获得焦点时，会向右移动10px：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
img:focus {
    margin-left: 10px;
}
</style>
</head>
<body>
<img src="geek-docs.com/image.jpg" alt="Geek Docs">
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当图片获得焦点时，会向右移动10px。这样用户就可以清楚地知道他们正在与哪个图片交互。

改变元素透明度

除了改变位置，我们还可以通过:focus伪类来改变元素的透明度。下面是一个示例，当段落获得焦点时，透明度会变成0.5：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
p:focus {
    opacity: 0.5;
}
</style>
</head>
<body>
<p>Geek-docs.com</p>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当段落获得焦点时，透明度会变成0.5。这样用户就可以清楚地知道他们正在与哪个段落交互。

改变元素阴影

除了改变透明度，我们还可以通过:focus伪类来改变元素的阴影效果。下面是一个示例，当按钮获得焦点时，会显示一个阴影效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当按钮获得焦点时，会显示一个5px的阴影效果。这样用户就可以清楚楚地知道他们正在与哪个按钮交互。

改变元素大小

除了改变阴影效果，我们还可以通过:focus伪类来改变元素的大小。下面是一个示例，当图片获得焦点时，宽度会变成200px，高度会变成150px：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
img:focus {
    width: 200px;
    height: 150px;
}
</style>
</head>
<body>
<img src="geek-docs.com/image.jpg" alt="Geek Docs">
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当图片获得焦点时，宽度会变成200px，高度会变成150px。这样用户就可以清楚地知道他们正在与哪个图片交互。

改变元素旋转

除了改变大小，我们还可以通过:focus伪类来改变元素的旋转角度。下面是一个示例，当按钮获得焦点时，会顺时针旋转45度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    transform: rotate(45deg);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当按钮获得焦点时，会顺时针旋转45度。这样用户就可以清楚地知道他们正在与哪个按钮交互。

改变元素背景图片

除了改变旋转角度，我们还可以通过:focus伪类来改变元素的背景图片。下面是一个示例，当按钮获得焦点时，会显示不同的背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    background-image: url('geek-docs.com/image.jpg');
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当按钮获得焦点时，会显示一个名为image.jpg的背景图片。这样用户就可以清楚地知道他们正在与哪个按钮交互。

改变元素边框圆角

除了改变背景图片，我们还可以通过:focus伪类来改变元素的边框圆角。下面是一个示例，当输入框获得焦点时，边框圆角会变成10px：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input:focus {
    border-radius: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当输入框获得焦点时，边框圆角会变成10px。这样用户就可以清楚地知道他们正在与哪个输入框交互。

改变元素透明度和颜色

除了单独改变样式属性，我们还可以通过:focus伪类来同时改变元素的透明度和颜色。下面是一个示例，当按钮获得焦点时，透明度会变成0.5，颜色会变成红色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    opacity: 0.5;
    color: red;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>

Output:

CSS Focus伪类

在上面的示例中，当按钮获得焦点时，透明度会变成0.5，颜色会变成红色。这样用户就可以清楚地知道他们正在与哪个按钮交互。

改变元素动画效果

除了改变静态样式，我们还可以通过:focus伪类来改变元素的动画效果。下面是一个示例，当按钮获得焦点时，会有一个缩放动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
    animation: scale 0.5s ease-in-out;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>