如何获取::-ms-reveal伪元素的getComputedStyle()计算样式？

Edge浏览器默认会给密码输入框显示密码查看按钮，隐藏这个按钮的方法很简单：定位::-ms-reveal伪元素，添加display: none属性，或者将宽高设为0即可。

我尝试通过以下代码获取该伪元素的计算样式，验证它是否已经被设置为display: none：

getComputedStyle(document.getElementById('pass'), '::-ms-reveal');

但日志始终显示display属性为inline-block，看起来像是获取了密码输入框本身的display值，而非伪元素的。请问该如何正确获取::-ms-reveal伪元素的display值？

问题原因与解决办法 #

::-ms-reveal是微软的私有伪元素，属于浏览器内部实现的控件，并非标准伪元素（比如::before/::after）。浏览器没有将它的样式暴露给getComputedStyle的标准接口，所以直接通过该方法无法获取到它的计算样式。

如果需要在脚本层面验证按钮是否被隐藏，可以用这些间接方式：

• 检查输入框的右内边距：默认状态下，密码输入框因为包含::-ms-reveal按钮，会有额外的右内边距；当按钮被隐藏后，这个内边距会恢复为常规输入框的数值。可以通过getComputedStyle(passInput).paddingRight获取值来判断。
• 动态检测样式规则：遍历document.styleSheets中的样式规则，查找针对input::-ms-reveal设置的display: none规则，以此验证样式是否已经生效。

内容的提问来源于stack exchange，提问作者htoor