当我重置密码输入上 ::placeholder 的样式时，它会在 Chrome 和 Chrome 上变成点。 Safari 浏览器

发布于 2025-01-10 22:34:09 字数 637 浏览 2 评论 0原文

我在上使用 all: unset ，占位符变成了点。

HTML：

<input type="password" placeholder="text of placeholder">

CSS：

::placeholder {
    all: unset;
}

占位符的错误视觉结果：

有没有办法仍然使用 all: unset 并带回正确显示的占位符的值？

CodePen 示例

原文

I'm using all: unset on <input type="password" placeholder="text of placeholder"> and the placeholder turn into dots.

HTML:

<input type="password" placeholder="text of placeholder">

CSS:

::placeholder {
    all: unset;
}

The wrong, visual result of placeholder:

Is there any way to still use the all: unset and bring back the value of placeholder that will show up correctly?

CodePen Example

分享到QQ

分享到微博

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

发布评论

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

空城仅有旧梦在 2025-01-17 22:34:09

尝试-webkit-text-security：initial;（https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security）

.reset-input::placeholder {
  all: unset;
  -webkit-text-security: initial;
}

<label>Reset Input</label>
<input class="reset-input" type="password" placeholder="placeholder text">

<br><br>

<label>UnReset Input</label>
<input type="password" placeholder="placeholder text">

try -webkit-text-security: initial; (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security)

.reset-input::placeholder {
  all: unset;
  -webkit-text-security: initial;
}

<label>Reset Input</label>
<input class="reset-input" type="password" placeholder="placeholder text">

<br><br>

<label>UnReset Input</label>
<input type="password" placeholder="placeholder text">

回复收藏 0 原文

~没有更多了~