CSS如何使用:focus伪类

60次阅读
没有评论

在 CSS 中,:focus 伪类表示一个元素在获得焦点时的状态。在使用 :focus 伪类时,可以通过设置不同的样式来改变元素在获得焦点时的外观。

下面是一个示例 HTML5 页面,其中包含了一个使用 :focus 伪类的按钮:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using :focus Pseudo-class in CSS</title>
  <style>
    /* 定义按钮的样式 */
    button {
      background-color: #4CAF50; /* 绿色背景 */
      color: white; /* 白色字体 */
      border: none; /* 无边框 */
      padding: 15px 32px; /* 内边距 */
      text-align: center; /* 文字居中 */
      text-decoration: none; /* 无下划线 */
      display: inline-block; /* 行内块级元素 */
      font-size: 16px; /* 字体大小 */
      margin: 10px; /* 外边距 */
      cursor: pointer; /* 鼠标指针 */
    }

    /* 定义获得焦点时的样式 */
    button:focus {
      outline: none; /* 取消默认轮廓线 */
      box-shadow: 0 0 10px #4CAF50; /* 添加阴影效果 */
    }
  </style>
</head>
<body>
  <h1>Using :focus Pseudo-class in CSS</h1>
  <p>Click the button below and see the effect when it gets focus:</p>
  <button>Click Me</button>
</body>
</html>

在上面的示例中,定义了一个 button 元素的样式,并使用 :focus 伪类来定义按钮在获得焦点时的样式。当用户点击按钮并将焦点移动到按钮上时,按钮会显示一个绿色背景和白色字体,而当按钮获得焦点时,会添加一个深绿色的阴影效果。

值得注意的是,我们使用了 outline: none; 来取消按钮在获得焦点时默认的轮廓线。这样可以使页面看起来更加美观。

正文完
 
评论(没有评论)