Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created November 30, 2021 15:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save feo52/dbf4e0b1313c11245525c94698d2e183 to your computer and use it in GitHub Desktop.
Save feo52/dbf4e0b1313c11245525c94698d2e183 to your computer and use it in GitHub Desktop.
Download ZIP
::-ms-clear & ::-ms-reveal & -ms-high-contrast-adjust on Edge(Chromium) of Windows
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>-ms-vendor-prefix</title>
<style>
body { font-family: monospace; }
input:nth-of-type( 1)[type="text"]::-ms-clear { display: initial; }
input:nth-of-type( 2)[type="text"]::-ms-clear { display: none; }
input:nth-of-type( 3)[type="text"]::-ms-clear { color: initial; }
input:nth-of-type( 4)[type="text"]::-ms-clear { color: crimson; }
input:nth-of-type( 5)[type="text"]::-ms-clear { transform: rotate( 0deg); }
input:nth-of-type( 6)[type="text"]::-ms-clear { transform: rotate(45deg); }
input:nth-of-type( 7)[type="search"]::-webkit-search-cancel-button { display: initial; }
input:nth-of-type( 8)[type="search"]::-webkit-search-cancel-button { display: none; }
input:nth-of-type( 9)[type="search"]::-webkit-search-cancel-button { color: initial; }
input:nth-of-type(10)[type="search"]::-webkit-search-cancel-button { color: crimson; }
input:nth-of-type(11)[type="search"]::-webkit-search-cancel-button { transform: rotate( 0deg); }
input:nth-of-type(12)[type="search"]::-webkit-search-cancel-button { transform: rotate(45deg); }
input:nth-of-type(13)[type="password"]::-ms-reveal { display: initial; }
input:nth-of-type(14)[type="password"]::-ms-reveal { display: none; }
input:nth-of-type(15)[type="password"]::-ms-reveal { color: initial; }
input:nth-of-type(16)[type="password"]::-ms-reveal { color: crimson; }
input:nth-of-type(17)[type="password"]::-ms-reveal { transform: rotate( 0deg); }
input:nth-of-type(18)[type="password"]::-ms-reveal { transform: rotate(45deg); }
input:nth-of-type(19)[type="text"] { -webkit-text-security: none; }
input:nth-of-type(20)[type="text"] { -webkit-text-security: disc; }
input:nth-of-type(21)[type="text"] { -webkit-text-security: circle; }
input:nth-of-type(22)[type="text"] { -webkit-text-security: square; }
input:nth-of-type(23)[type="password"] { -webkit-text-security: none !important; }
input:nth-of-type(24)[type="password"] { -webkit-text-security: disc !important; }
input:nth-of-type(25)[type="password"] { -webkit-text-security: circle!important; }
input:nth-of-type(26)[type="password"] { -webkit-text-security: square!important; }
input:nth-of-type(27)[type="password"] { input-security: none; }
input:nth-of-type(28)[type="password"] { input-security: auto; }
p:nth-of-type(1) { -ms-high-contrast-adjust: auto; }
p:nth-of-type(2) { -ms-high-contrast-adjust: none; }
p:nth-of-type(3) { forced-color-adjust: auto; }
p:nth-of-type(4) { forced-color-adjust: none; }
p { color: crimson; }
</style>
</head>
<body>
<br>
[ Click & Type in the input field ]<br>
<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { display: initial; }<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { display: none; }<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { color: initial; }<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { color: crimson; }<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { transform: rotate( 0deg); }<br>
<input type="text" value="-ms-"> input[type="text"]::-ms-clear { transform: rotate(45deg); }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { display: initial; }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { display: none; }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { color: initial; }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { color: crimson; }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { transform: rotate( 0deg); }<br>
<input type="search" value="-webkit-"> input[type="search"]::-webkit-search-cancel-button { transform: rotate(45deg); }<br>
<input type="password"> input[type="password"]::-ms-reveal { display: initial; }<br>
<input type="password"> input[type="password"]::-ms-reveal { display: none; }<br>
<input type="password"> input[type="password"]::-ms-reveal { color: initial; }<br>
<input type="password"> input[type="password"]::-ms-reveal { color: crimson; }<br>
<input type="password"> input[type="password"]::-ms-reveal { transform: rotate( 0deg); }<br>
<input type="password"> input[type="password"]::-ms-reveal { transform: rotate(45deg); }<br>
<input type="text" value="-webkit-"> input[type="text"] { -webkit-text-security: none; }<br>
<input type="text" value="-webkit-"> input[type="text"] { -webkit-text-security: disc; }<br>
<input type="text" value="-webkit-"> input[type="text"] { -webkit-text-security: circle; }<br>
<input type="text" value="-webkit-"> input[type="text"] { -webkit-text-security: square; }<br>
<input type="password" value="-webkit-"> input[type="password"] { -webkit-text-security: none !important; }<br>
<input type="password" value="-webkit-"> input[type="password"] { -webkit-text-security: disc !important; }<br>
<input type="password" value="-webkit-"> input[type="password"] { -webkit-text-security: circle!important; }<br>
<input type="password" value="-webkit-"> input[type="password"] { -webkit-text-security: square!important; }<br>
<input type="password" value="-webkit-"> input[type="password"] { input-security: none; }<br>
<input type="password" value="-webkit-"> input[type="password"] { input-security: auto; }<br>
<br>
<br>
<br>
[ Change color contrast in Windows ]<br>
<br>
<p>-ms-high-contrast-adjust: auto;</p>
<p>-ms-high-contrast-adjust: none;</p>
<p>forced-color-adjust: auto;</p>
<p>forced-color-adjust: none;</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment