:active CSS psuedo-class does not work in contenteditable="true" parent-CodePudding

I noticed what I believe to be odd behavior and I've reproduced it in the codePen link below.

For the unfamiliar, try clicking the link in the CodePen and when pressed it won't turn red like it should due to the CSS.

CodePen link

<div contenteditable="true">
  interesting
  <a href="https://google.com">link</a>
</div>

a {
  color: green;
}

a:hover, a:focus {
  color: blue;
}

a:active {
  color: red;
}

The :hover and :focus psuedo-classes work. You'll notice :active does not work.

Is there any way to get this to work? Some work-around?

CodePudding user response：

This seems like the behavior that is to be expected.

contenteditable is in inherited so the anchor element is editable - this means it isn't 'clickable' in the sense of leading to the link. The user can alter its text if required just like any other editable element.

As @QuentinVeran has pointed out you can reset the contenteditable attribute on the anchor element so it isn't editable.

I wouldn't call this a quick workaround though. You have to decide whether the user is able to click that link and go to it or whether they are allowed to edit the text of the link. You can't have both given that HTML structure.

a {
  color: green;
}

a:hover,
a:focus {
  color: blue;
}

a:active {
  color: red;
}

<div contenteditable="true">interesting <a href="https://google.com" contenteditable="false">link</a></div>

CodePudding user response：

A quick workaround would be to "reset" the contenteditable attribute on this <a> element.

a {
  color: green;
}

a:hover, a:focus {
  color: blue;
}

a:active {
  color: red;
}

<div contenteditable="true">
  interesting <a contenteditable="false" href="https://google.com">link</a>
</div>