CSS 年鉴 → 选择器 → F → :focus

:focus

Avatar of Sara Cope
Sara Cope 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

CSS 中的 :focus 伪类用于为当前由键盘或鼠标激活的元素设置样式。这是一个示例

textarea:focus {
  background: pink;
}

任何元素（最常见的是 <input> 和 <textarea>）在被选中并准备输入文本时（例如，光标闪烁时）处于“焦点”状态。鼠标用户可以单击它们（或相关的 label）来聚焦，键盘用户可以通过 Tab 键切换到它们。

“Tab 键切换”

:focus 伪类的另一个用途是通过元素进行“Tab 键切换”。许多浏览器都具有用于 Tab 键选择的默认焦点状态，即虚线轮廓。它很容易移除，但如果确实要移除，请确保用合适的替代方案替换它。

<a>、<button>、<input> 和 textarea 默认都具有 :focus 状态，但您可以为 HTML 中的任何元素指定焦点状态。contenteditable 和 tabindex 属性都适用于此，例如：

其他资源

浏览器支持

所有浏览器都支持 :focus 的基本用法。

嘘！ 创建一个DigitalOcean账户并获得200美元的免费云托管和服务额度。

评论（Comments）

  1. 你的姓名（Your Name）
    评论永久链接#

    测试（test）

    回复（Reply）
    • Aviraj
      评论永久链接#

      我想在input标签中使用内联css的focus事件。

  2. Kedar
    评论永久链接#

    :focus有什么用？

    回复（Reply）
    • Tudor
      评论永久链接#

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

      :focus选择器允许用于接受键盘事件或其他用户输入的元素。

      这是一个例子。

    • Tamil
      评论永久链接#

      focus用于更改背景颜色（例如input字段获得焦点时）。

    • pawan
      评论永久链接#

      是的（yes）

    • krishnan

      评论永久链接#

      嗨，Kedar，
      :focus 会执行我们为特定元素类型编写的 CSS，从而我们可以在其中编写 CSS 代码。这样，我们就不需要在每个地方都一遍遍地编写 CSS 属性。
      例如，
      input[type=text]:focus{
      background-color:#ff0000;
      }
      如果你在页面中编写了这段 CSS，那么当我们聚焦到 type 为 text 的 input 标签时，它的背景颜色就会变成红色。这个 :focus 会在内部自动绑定 onfocus 事件…

  3. Surce Beats
    评论永久链接#

    谢谢你的帮助！对我来说效果很好 :)

    回复（Reply）
  4. DLSMIZEL
    评论永久链接#

    是否可以对两个元素使用 :focus？

    回复（Reply）
    • Stan Rogers
      评论永久链接#

      你的光标可能同时出现在两个地方吗？:focus 的目的是在你用户输入或使用选择键等操作时，向他们提供屏幕上将发生事件位置的反馈。获得焦点状态的唯一方法是将光标移动到该元素上。但即使你可以在两个或多个元素获得焦点时设置相同的视觉状态，为什么要这么做呢？如果两个元素以相同的方式被点亮（或突出显示），操作将发生在哪里？请记住，只有文本（和类似）输入和文本区域有次要指示，并且在页面上并不总是很容易看到闪烁的光标。使用 :focus 清楚地告诉用户哪个元素获得了焦点，而不是作为页面状态的小技巧。

    • sandeep
      评论永久链接#

      是的

    • Randy
      评论永久链接#

      我实际上有一个需要这种情况的用例。我们有一个应用程序，用户在屏幕左侧查看手写文本的图像，绘制一个框，并在框中输入它表示的内容（例如，人的姓名）；然后该姓名出现在右侧“结构化数据”视图中的姓名字段中。当他们在左侧输入时，右侧会更新。这工作得很好。我们希望它看起来像一个文本编辑字段，同时在两个字段上都具有“焦点”，以便用户可以查看任一位置，并感觉可以在那里进行编辑。两者将保持同步。这只是为了方便用户在他们查看/思考的地方进行编辑。

  5. Jota D
    评论永久链接#

    非常好的信息，兄弟！

    回复（Reply）
  6. Vishal Chandola
    评论永久链接#

    :focus 当我们使用此属性时，则表示在聚焦时，即单击特定按钮或标签时，会选择我们为聚焦事件编写的特定 CSS，如下例所示。
    :focus {
    background: #ddd;
    border: 1px solid #000;
    }

    回复（Reply）
  7. Benson Karue
    评论永久链接#

    我想问一下关于焦点消失的情况。是否可以通过 CSS 来定位焦点消失。
    如果我能得到你们的帮助，我可能会在 Bootstrap 中使用它。

    回复（Reply）
  8. Abhishek chauhan
    评论永久链接#

    我想问一下关于焦点消失的情况。是否可以通过 CSS 来定位焦点消失。
    如果我能得到你们的帮助，我可能会在 Bootstrap 中使用它。

    回复（Reply）
  9. amit yadav
    评论永久链接#

    .input:focus { background: pink; color:#000;}

    回复（Reply）
  10. hanumansingh
    评论永久链接#

    当我聚焦时，如何删除背景颜色？

    回复（Reply）
  11. Louis Bispo
    评论永久链接#

    button:focus 似乎在 Firefox 或 Safari（Mac OSX）以及 Safari iOS 中不起作用。这足以让它变得实际上不可用。

    回复（Reply）
  12. Mark
    评论永久链接#

    我将 :focus 用作下拉菜单的技术。

    HTML

    <ul id="nested">
    <li tabindex="0">fruit
        <ul>
            <li><a href="#">apple</a></li>
            <li><a href="#">banana</a></li>
            <li><a href="#">cherry</a></li>
            <li><a href="#">donut</a></li>
        </ul>
    </li>
    …

    CSS

    ul#nested>li:focus {
    outline: none;
}

ul#nested>li:focus>ul {
    display: block;
}

    tabindex 属性启用焦点，而 outline 属性则删除视觉指示器。
    应该从 IE8 开始工作。

    回复（Reply）
  13. gireejatmaj
    评论永久链接#

    我想在单击另一个按钮时，使特定区域的文本区域获得焦点。（当我单击特定按钮时，光标应在文本区域中闪烁）

    自动聚焦效果很好，但仅在页面刷新时有效一次。我想在每次单击特定按钮时都获得焦点（光标在文本区域中闪烁）。

    回复（Reply）
    • Mark
      评论永久链接#

      如果它真的是一个按钮，那么不，如果没有 JavaScript，就无法做到。

      如果你为 textarea 创建一个 label，那么这正是它应该做的事情。只要你给 textarea 一个 id 属性，并在 label 中使用 for 属性，label 和 textarea 就无需彼此相邻。

      使用 CSS，你可以使 label 呈现任何你想要的外观，包括按钮的外观。

  14. Gireejatmaj
    评论永久链接#

    我不理解 Mark 的意思。你能用一个例子解释一下吗？如果你说按钮需要 JavaScript，请编写该 JavaScript 代码。并解释如何使用 label 来实现。请为每个提供合适的示例。

    回复（Reply）
    • Mark
      评论永久链接#

      label 应该为此目的充当按钮。你可以按如下方式使用它

      <p><label for="message">Enter Message</label></p>
…
<p><textarea id="message" name="message"></textarea></p>

      或者，除了（或以及）上面的 label 之外，你还可以添加以下内容

      <button id="select-message">Message</button>

      //  inside initialisation script
    document.getElementById('select-message').onclick=function() {
        document.getElementById('message').focus();
    }

      我为此获得额外奖励吗？

  15. Gireejatmaj
    评论永久链接#

    谢谢 Mark 兄弟
    你是否有使用 AngularJS 解决相同问题的方案？这将是我最好的选择。

    回复（Reply）
  16. Web 开发人员
    评论永久链接#

    是否可以将 input 与 focus 一起使用，而不是选择器？


    我想将焦点选择器应用于所有 input 元素，除了一个。
    我们可以使用类似下面的代码吗？
    input:focus(:not(.phone)){
    }

    回复（Reply）
  17. Andy
    评论永久链接#

    我认为Abhishek在上面问过这个问题，但我没有看到答案。如果我聚焦某个元素然后向后移动，如何“重置”使其不再保持焦点状态？

    回复（Reply）
  18. Imanuel
    评论永久链接#

    在iOS Safari中，我无法让两个div依次获得焦点。点击第二个元素时，第一个元素仍然保持焦点状态。有没有解决方法？

    回复（Reply）
  19. Rakesh
    评论永久链接#

    你好

    实际上，如果我们把登录和注册按钮并排放置，如果我们点击登录按钮，注册按钮的背景颜色应该消失，同样地，如果我们点击注册按钮，登录按钮的背景颜色也应该消失。请尽快发送代码。

    回复（Reply）
  20. vkm
    评论永久链接#

    你好，我正在寻找一种方法，即使我在屏幕上其他地方点击，按钮的背景颜色也可以保持不变。
    我使用 button:active 为按钮设置了一些颜色，但当我点击屏幕上的其他地方时，颜色就会消失。我有几个按钮需要设置此属性，这可以使用 CSS 实现吗？

    谢谢，
    V

    回复（Reply）
  21. raymond
    评论永久链接#

    https://stackoverflow.com/questions/46643441/how-do-i-change-a-menu-image-opacity-when-a-menu-item-is-active
    上面链接是我今天在stackoverflow上提出的一个问题。给出的解决方案存在问题。请查看我下面的评论以寻求帮助。

    回复（Reply）
  22. Maria
    评论永久链接#

    如何在`

    回复（Reply）
  23. Shivam Tyagi
    评论永久链接#

    input:focus{
    outline-color: rgb(0,114,198,0.7) !important;
    outline-width: 0.1px !important;
    -moz-outline-color: rgb(0,114,198,0.7) !important;
    -moz-outline-width:0.1px !important;}

    在Mozilla Firefox上不起作用。该怎么办？

    回复（Reply）

发表评论

您的电子邮件地址将不会被公开。 必填字段标有 *

© 2024 . All rights reserved.