英文:
Is there a way to check if the password in an input element in currently made visible?
问题
我尝试使用JS的密码元素进行动画。我想根据密码是否通过点击标准的::-ms-reveal图标进行可见来区分两种动画。我知道可以通过添加复选框来显示/隐藏密码并在JS中使用element.type=="password"的方法来实现。由于我绝对更喜欢没有复选框的更简洁版本，我希望能在这里找到解决方案。
不幸的是，到目前为止我没有取得太多进展。除了我上面描述的解决方法之外，我尝试将::-ms-reveal作为伪类使用，但不足为奇的是没有起作用。
::-ms-reveal {
transform: scale(0.5);
}
input {
font-size: 1.5em;
color: green;
}
input:focus {
font-size: 2em;
color: red;
}
input:has(::-ms-reveal:active) {
color: yellow;
}
<form>
<input type="password" placeholder="Type Password here!">
</form>
英文:
I am trying to animate something with input of a password element via JS. I want to differentiate between two animations depending on whether or not the password has been made visible by clicking on the standard ::-ms-reveal icon. I know that there is a work-around by adding a checkbox to show/hide the password and using element.type=="password" in JS instead. Since I would definately prefer the cleaner version without a checkbox, I was hoping to find a solution here.
Unfortunately I have not made much progress so far. Other than the work-around I descibed above, I tried to use the ::-ms-reveal as a pseudoclass , which unsurprisingly did not work though.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
::-ms-reveal {
transform: scale(0.5);
}
input {
font-size: 1.5em;
color: green;
}
input:focus {
font-size: 2em;
color: red;
}
input:has(::-ms-reveal:active) {
color: yellow;
}
<!-- language: lang-html -->
<form>
<input type="password" placeholder="Type Password here!">
</form>
<!-- end snippet -->
Other than that I did not have a great idea so far.
答案1
得分: 1
这是来自WebKit博客文章中的一句引用，在标题**“还有更多”**下的第四段中：
需要注意的是，CSS工作组已经决定不允许在
:has()内部使用所有现有的伪元素。例如，article:has(p::first-line)和ol:has(li::marker)将无法工作。同样，::before和::after也一样。
所以看起来目前你运气不太好。你可以为::-ms-reveal伪元素本身（显示/隐藏密码按钮）设置样式，但不能使用:has来基于其伪元素的状态为父级<input>元素设置样式。在点击后，Edge会为伪元素分配.reveal类，但选择器input:has(::-ms-reveal.reveal)目前被禁止。input:has(.reveal)也不起作用，我已经尝试过了。
如果在Github的评论中有任何线索，CSS工作组可能会在将来放宽这一限制。也许值得等到Chrome、Firefox和Safari在密码输入中提供显示按钮。
英文:
A quote from this WebKit blog post, in the fourth paragraph under the heading “And more”:
> Something to note — the CSS Working Group resolved to disallow all
> existing pseudo-elements inside of :has(). For example,
> article:has(p::first-line) and ol:has(li::marker) won’t work. Same
> with ::before and ::after.
So it looks like you’re out of luck, at least for the moment. You can style the ::-ms-reveal pseudo element itself (the reveal icon/button), but you can’t style the parent <input> element based on the state of its pseudo element, using :has. Edge assigns the class .reveal to the pseudo element after you click it, but the selector input:has(::-ms-reveal.reveal) is currently disallowed. input:has(.reveal) doesn’t work either, I’ve tried it.
The CSS Working Group might relax this restriction in future, if the comments in Github are anything to go by. It might be worth waiting until Chrome, Firefox and Safari provide reveal buttons in password inputs.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论