Safari browser for the <input type = "passport"> tag to automatically add a small lock icon (as shown below), the intention is to let the user can select the appropriate username / password autofill from here, but in some scenes under the need to hide it, probably for security reasons, of course, also possible for the UI style considerations.
From the Internet when one can find a wide variety of effective solutions, for example, the following code is one of them, but few will tell you why, so that the next time you encounter a similar problem like this, or to the aid of Google , Baidu.
input::-webkit-credentials-auto-fill-button {
display: none !important;
visibility: hidden;
pointer-events: none;
position: absolute; /* 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */
right: 0;
}Before understanding why, we need a little understanding of what is under the Shadow DOM, simple point and said:
Shadow DOM DOM element allows the insertion of a subtree when rendering document, but this is not the main lesson subtree of the DOM tree. Developers can package their own HTML tags, CSS styles and JavaScript code using the Shadow DOM.
In all cases introduced Shadow DOM, the most classic is the <video> tag. In HTML, we only use a <video> tag, but on the page are showing a lot of elements, such as the download button, full screen button Yeah, and so on. This is the Shadow DOM credit, and render it in the Document <Video> when the element is inserted in the sub-tree of this element in <the Button> , <span> and other tag is used to display a series of elements download, full screen and so on. The same principles apply <input type = "passowrd"> tag, although its sub-tree with respect to the element <video> pitiful it.
We can show Shadow DOM open switch in Safari by the following method.
After displaying the Shadow DOM, we can clearly see the <input type = "passport"> The small lock is <div pseudo = "- webkit- credentials-auto-fill-button"> </ div> rendering.
So our problem is how to hide the corresponding simplified by CSS <div> . Having said that, I believe we all understand CSS at the beginning of the article and why the role of the bar.
More professional front-end knowledge, make the [2048] ape www.mk2048.com