图集1/1

正文 3351字数 200,138阅读

<style> .form-b6px1{width:300px;} .form-b6px1 { position: relative; margin-top: 16px; height: 48px; font-size: 14px; background: #fff } .form-b6px1>* { display: inline-block; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .form-b6px1>input { width: 100%; height: 100%; left: 0; padding-left: 10px; border: 1px solid #ddd; border-radius: 4px; color: #333; -webkit-appearance: none } .form-b6px1>input::-webkit-input-placeholder { color: #999 } .form-b6px1>input:-ms-input-placeholder,.form-b6px1>input::-ms-input-placeholder { color: #999 } .form-b6px1>input::placeholder { color: #999 } .form-b6px1>input:focus { border-color: #0089dc }.SwitchButton-1rBfm { position: absolute; top: -1px; left: -1px; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%; background: #fff; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s } .SwitchButton-2b6RO { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 6px; width: 40px; height: 16px; color: #999; font-size: 12px; border: 1px solid #ddd; border-radius: 8px; -webkit-transition: background-color .3s,border-color .3s; transition: background-color .3s,border-color .3s }.SwitchButton-3wLB9 { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; color: #fff; border-color: #3190e8; background: #3190e8 } .SwitchButton-3wLB9 .SwitchButton-1rBfm { -webkit-transform: translate3d(24px,0,0); transform: translate3d(24px,0,0) }.SwitchButton-3BmOw { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .SwitchButton-2b6RO,.SwitchButton-1rBfm{ box-sizing: border-box;font-family:'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;line-height:1.2; } </style> <section class="form-b6px1"><input placeholder="密码" id="tttd" type="password" autocapitalize="on"><div onclick="mmlolgin('tttd',this);" class="SwitchButton-2b6RO SwitchButton-3BmOw"><div class="SwitchButton-1rBfm"></div>···</div></section> <script> function mmlolgin(id,sthis){ var ttype=document.getElementById(id).type; var ntttype='password'; var othml='<div class="SwitchButton-1rBfm"></div>'; var ntextt='···'; var ntexttcss='SwitchButton-2b6RO SwitchButton-3BmOw'; if(ttype=='password'){ ntttype='text'; ntextt='abc '; ntexttcss='SwitchButton-2b6RO SwitchButton-3wLB9'; } /*console.log();*/ document.getElementById(id).setAttribute('type', ntttype); sthis.className=ntexttcss; sthis.innerHTML=othml+ntextt; } </script>
Run code
Cut to clipboard