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

Question

我在 <input type="password" placeholder="text of placeholder"> 上使用 all: unset，占位符变成了点。

HTML:

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

CSS:

::placeholder {
    all: unset;
}

占位符的错误视觉结果：

有没有办法继续使用 all: unset 并恢复正确显示的占位符值？

CodePen Example

Answer 1

尝试 -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">

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

When I reset the style of ::placeholder on a password input it turn into dots on Chrome & Safari browsers

css

safari

google-chrome