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

发布于 2025-01-12 08:13:13 字数 787 浏览 4 评论 0原文

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

编辑：所有 div 必须保持显示：内联。

.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>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情深如许 2025-01-19 08:13:13

在您的 .parent 类中，将 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评论）

谢谢回复！可悲的是，我不能这样做，因为父母本身就是
文档流的一部分，并且当它不是文档流时会中断该流
内联。

您可以将 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>

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

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

回复收藏 0 原文

~没有更多了~