正在编辑的元素的 CSS 选择器(不是悬停!)，仅限 WebKit

Question

我有可编辑的元素(即内容可编辑)。每一个都在规则的跨度内。有没有办法在文本光标(插入点)所在的范围内添加边框？我知道对于“鼠标”光标，您可以使用::hover。

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

例如，如果“|”是文本插入点，我希望“一”字变成红色边框

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;
}

DEMO HERE