当 parent 有过滤器时，插入符号在 contenteditable div 上不可见

Question

我有一个启用了 contenteditable 的内联 div，它位于具有 drop-shadow 过滤器的元素内。虽然可以在 contenteditable div 中写入，但插入符号是不可见的。如何显示插入符号？

编辑：所有 div 必须保留 display:inline。

.parent {
  display: inline;
  background: white;
  margin: 5px;
}

.no-filter {}

.filter {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.4));
}

div>div {
  display: inline;
  outline: none;
  border: none;
}

<div class="parent no-filter">
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div class="parent filter">
  <div contenteditable>
    This caret is invisible.
  </div>

Answer 1

在您的 .parent class 中将 diplay 值从 display: inline 更改为 display: inline-block

.parent {
  display: inline-block;
  background: white;
  margin: 5px;
}

.no-filter {}

.filter {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.4));
}

div>div {
  display: inline;
  outline: none;
  border: none;
}

<div class="parent no-filter">
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div class="parent filter">
  <div contenteditable>
    This caret is invisible.
  </div>
</div>

更新（基于 OP 评论）

Thanks for the reply! Sadly, I cannot do that, as the parent itself is part of a document flow and would break that flow when it's not inline.

您可以将 filter 换成 box-shadow

.parent {
  display: inline;
  background: white;
  margin: 5px;
}

.no-filter {}

.filter {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4)
}

div>div {
  display: inline;
  outline: none;
  border: none;
}

<div class="parent no-filter">
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div class="parent filter">
  <div contenteditable>
    This caret is invisible.
  </div>
</div>

当 parent 有过滤器时，插入符号在 contenteditable div 上不可见

Caret is invisible on contenteditable div when parent has filter

html

css

filter

caret

contenteditable

更新（基于 OP 评论）