CSS 正在编辑的元素选择器（不是悬停！），仅限 WebKit

Question

我有可编辑的元素（即内容可编辑）。每一个都在规则的跨度内。有没有办法在文本光标（插入点）所在的范围内添加边框？我知道对于 "mouse" 光标你可以使用 ::hover.

<span class=one>alpha</span>
<span class=one>beta</span>
<span class=one>gamma</span>

例如，如果“|”是文本插入点，我希望"one"这个词变成红色边框

al|pha beta gamma

没有Javascript，只有CSS。

谢谢！

Answer 1

使用选择器:focus

Note: the span must be content-editable

CSS

.one:focus{
    border: solid 1px red;
    display: inline-block;
}

CSS selector for element being edited (not hover!), only WebKit