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

Question

我有可编辑的元素（内容可编辑，即）。每个都在常规跨度内。有没有办法在文本光标（插入点）所在的范围内添加边框？我知道对于“鼠标”光标，您可以使用:: 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

  

注意：范围必须是内容可编辑的

<强> CSS

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

<强> DEMO HERE