Caret is invisible on contenteditable div when parent has filter-CodePudding

I have an inline div with contenteditable enabled which is inside an element that has a drop-shadow filter. While one can write in the contenteditable div, the caret is invisible. How can I make the caret be displayed?

Edit: All divs must remain 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 >
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div >
  <div contenteditable>
    This caret is invisible.
  </div>

CodePudding user response：

In your .parent class change the diplay value from display: inline to 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 >
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div >
  <div contenteditable>
    This caret is invisible.
  </div>
</div>

UPDATE (Based on OP comment)

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.

You can switch your filter for 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 >
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div >
  <div contenteditable>
    This caret is invisible.
  </div>
</div>