纯 css 实现密文明文密码输入框切换

密码输入框一般都会伴随一个用于控制密文明文显示的控制器，传统的做法都是利用 js 监听点击控制器的时候修改密码输入框的 type。那么这个需求可以用纯 css 实现吗？

借助兄弟选择器 + checked 伪类 + -webkit-text-security 即可：

<style>
  .ctrl:checked + input {
    -webkit-text-security: disc;
  }
</style>
<input type="checkbox" class="ctrl" />
<input type="text" />

如果密码输入框在 checkbox 的上面怎么办？好办！代码还写在下面，通过样式把输入框给“挪到”上面。