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-within` 伪类
:focus-within
form:focus-within { background: lightyellow; }
`:focus-visible` 和向后兼容性
浏览器支持
所有浏览器都支持 :focus
的基本用法。
测试(test)
我想在input标签中使用内联css的focus事件。
:focus有什么用?
:focus选择器用于选择获得焦点的元素。
:focus选择器允许用于接受键盘事件或其他用户输入的元素。
这是一个例子。
focus用于更改背景颜色(例如input字段获得焦点时)。
是的(yes)
嗨,Kedar,
:focus 会执行我们为特定元素类型编写的 CSS,从而我们可以在其中编写 CSS 代码。这样,我们就不需要在每个地方都一遍遍地编写 CSS 属性。
例如,
input[type=text]:focus{
background-color:#ff0000;
}
如果你在页面中编写了这段 CSS,那么当我们聚焦到 type 为 text 的 input 标签时,它的背景颜色就会变成红色。这个 :focus 会在内部自动绑定 onfocus 事件…
谢谢你的帮助!对我来说效果很好 :)
是否可以对两个元素使用 :focus?
你的光标可能同时出现在两个地方吗?:focus 的目的是在你用户输入或使用选择键等操作时,向他们提供屏幕上将发生事件位置的反馈。获得焦点状态的唯一方法是将光标移动到该元素上。但即使你可以在两个或多个元素获得焦点时设置相同的视觉状态,为什么要这么做呢?如果两个元素以相同的方式被点亮(或突出显示),操作将发生在哪里?请记住,只有文本(和类似)输入和文本区域有次要指示,并且在页面上并不总是很容易看到闪烁的光标。使用 :focus 清楚地告诉用户哪个元素获得了焦点,而不是作为页面状态的小技巧。
是的
我实际上有一个需要这种情况的用例。我们有一个应用程序,用户在屏幕左侧查看手写文本的图像,绘制一个框,并在框中输入它表示的内容(例如,人的姓名);然后该姓名出现在右侧“结构化数据”视图中的姓名字段中。当他们在左侧输入时,右侧会更新。这工作得很好。我们希望它看起来像一个文本编辑字段,同时在两个字段上都具有“焦点”,以便用户可以查看任一位置,并感觉可以在那里进行编辑。两者将保持同步。这只是为了方便用户在他们查看/思考的地方进行编辑。
非常好的信息,兄弟!
:focus 当我们使用此属性时,则表示在聚焦时,即单击特定按钮或标签时,会选择我们为聚焦事件编写的特定 CSS,如下例所示。
:focus {
background: #ddd;
border: 1px solid #000;
}
我想问一下关于焦点消失的情况。是否可以通过 CSS 来定位焦点消失。
如果我能得到你们的帮助,我可能会在 Bootstrap 中使用它。
我想问一下关于焦点消失的情况。是否可以通过 CSS 来定位焦点消失。
如果我能得到你们的帮助,我可能会在 Bootstrap 中使用它。
.input:focus { background: pink; color:#000;}
当我聚焦时,如何删除背景颜色?
button:focus
似乎在 Firefox 或 Safari(Mac OSX)以及 Safari iOS 中不起作用。这足以让它变得实际上不可用。我将
:focus
用作下拉菜单的技术。HTML
CSS
tabindex
属性启用焦点,而outline
属性则删除视觉指示器。应该从 IE8 开始工作。
我想在单击另一个按钮时,使特定区域的文本区域获得焦点。(当我单击特定按钮时,光标应在文本区域中闪烁)
自动聚焦效果很好,但仅在页面刷新时有效一次。我想在每次单击特定按钮时都获得焦点(光标在文本区域中闪烁)。
如果它真的是一个按钮,那么不,如果没有 JavaScript,就无法做到。
如果你为
textarea
创建一个label
,那么这正是它应该做的事情。只要你给textarea
一个id
属性,并在label
中使用for
属性,label
和textarea
就无需彼此相邻。使用 CSS,你可以使
label
呈现任何你想要的外观,包括按钮的外观。我不理解 Mark 的意思。你能用一个例子解释一下吗?如果你说按钮需要 JavaScript,请编写该 JavaScript 代码。并解释如何使用 label 来实现。请为每个提供合适的示例。
label
应该为此目的充当按钮。你可以按如下方式使用它或者,除了(或以及)上面的 label 之外,你还可以添加以下内容
我为此获得额外奖励吗?
谢谢 Mark 兄弟
你是否有使用 AngularJS 解决相同问题的方案?这将是我最好的选择。
是否可以将 input 与 focus 一起使用,而不是选择器?
我想将焦点选择器应用于所有 input 元素,除了一个。
我们可以使用类似下面的代码吗?
input:focus(:not(.phone)){
}
我认为Abhishek在上面问过这个问题,但我没有看到答案。如果我聚焦某个元素然后向后移动,如何“重置”使其不再保持焦点状态?
在iOS Safari中,我无法让两个div依次获得焦点。点击第二个元素时,第一个元素仍然保持焦点状态。有没有解决方法?
你好
实际上,如果我们把登录和注册按钮并排放置,如果我们点击登录按钮,注册按钮的背景颜色应该消失,同样地,如果我们点击注册按钮,登录按钮的背景颜色也应该消失。请尽快发送代码。
你好,我正在寻找一种方法,即使我在屏幕上其他地方点击,按钮的背景颜色也可以保持不变。
我使用 button:active 为按钮设置了一些颜色,但当我点击屏幕上的其他地方时,颜色就会消失。我有几个按钮需要设置此属性,这可以使用 CSS 实现吗?
谢谢,
V
https://stackoverflow.com/questions/46643441/how-do-i-change-a-menu-image-opacity-when-a-menu-item-is-active
上面链接是我今天在stackoverflow上提出的一个问题。给出的解决方案存在问题。请查看我下面的评论以寻求帮助。
如何在`
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上不起作用。该怎么办?