仅当占位符为空或内部有br标记时，使用CSS显示带有p标记的占位符文本

owfi6suc 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(157)

我正在尝试向p标记显示占位符文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
      p:empty:not(:focus):before,
      p br:only-child:not(:focus):before {
          content: attr(data-text);
      }
  </style>
</head>
<body>
<p data-text="placeholder text..."></p>
</body>
</html>

上面的代码可以工作。但是当我试图在p标签中添加br标签时，比如<p data-text="placeholder text..."><br></p>，它不起作用。
这条线p br:only-child:not(:focus):before是我认为的问题，但我找不到解决办法。有人能给予我一个建议吗？

css

来源：https://stackoverflow.com/questions/75824929/show-placeholder-text-with-a-p-tag-with-css-only-when-its-empty-or-there-is-a

1条答案

按热度按时间

cnh2zyt31#

你可以添加:has伪类到你的样式中来修复：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
    p:empty:not(:focus):before,
    p:has(br:only-child):not(:focus):before {
        content: attr(data-text);
    }

  </style>
</head>
<body>
<p data-text="placeholder text..."><br></p>
</body>
</html>

赞(0）回复(0）举报 2023-03-24

我来回答

仅当占位符为空或内部有br标记时，使用CSS显示带有p标记的占位符文本

1条答案

相关问题

热门标签

最新问答